0

React Motion を使用してスライド メニューを再作成しようとしています。ここで私の非動作例を見ることができます: http://codepen.io/kirupa/pen/BQVzvQ (青い円をクリックしてメニューを表示または非表示にします)

これが私の問題です。黄色の領域内の任意の場所をクリックすると、メニューが非表示になります。ReactMotion 以外の動作例はこちら: https://www.kirupa.com/html5/examples/slidingmenu.htm

React に戻ります。なんらかの理由で、モーション タグ内のメニュー要素にアタッチされたイベント ハンドラーが無視されます。関連するスニペットは次のようになります。

      <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 でコンポーネントを調べると、イベント ハンドラーがアタッチされていません。それは何らかの理由で本当に奇妙に思えます。それはスコーピングの問題でしょうか？

ありがとう、

キルパ

4

1 に答える 1

0

それはスコーピングの問題でした！次のようなことをすると修正されました。

var self = this;

self.handleMouseDown;

于 2016-12-10T20:48:15.713 に答える