0
React Motionを使用してスライディングメニューを再作成しようとしています。ここに私の非実例を見ることができます：http://codepen.io/kirupa/pen/BQVzvQ（青い丸をクリックしてメニューを表示するか隠す）React-Motionのモーションタグ内のイベントハンドラが無視される
これは私の問題です。黄色い領域のどこかをクリックするとメニューが消えます。動作していないReactMotionの例は次のとおりです。https://www.kirupa.com/html5/examples/slidingmenu.htm
何らかの理由で、Motionタグ内のメニュー要素に関連付けられたイベントハンドラが無視されています。関連するスニペットは次のようになります。
<Motion style={
{
x: spring(this.state.visible ? 0 : -100)
}
}>
{
function({x}) {
return (
<div onMouseDown={this.handleMouseDown} id="flyoutMenu" style={{
transform: "translate3d(" + x + "vw, " + 15 + "vw, 0)"
}}>
<h2><a href="#">Home</a></h2>
<h2><a href="#">About</a></h2>
<h2><a href="#">Contact</a></h2>
<h2><a href="#">Search</a></h2>
</div>
);
}
}
</Motion>
onMouseDown={this.handleMouseDown}に注目してください。これは、クリックするとメニューを表示（非表示）する青い円に付いた同じイベントで、正常に動作します。
私はここで間違っていますか？これは明らかに間違ったことをしているようですが、それが何であるかは分かりません。これが役立つ場合、React DevToolsのコンポーネントを調べると、イベントハンドラはアタッチされません。それは何らかの理由で本当に奇妙なようです。それはスコープの問題だろうか？
おかげで、
Kirupa