4

いくつかのハンドラーでこの単純なレンダリング関数を使用しています。

render:function(){
        return (
            <div id="all-highlights" class="highlight-container" onMouseDown={this.drag} onMouseUp={this.dragEnd} onMouseMove={this.moving}>
                <div class="highlight">

                </div>
            </div>
        );
    }

React.createClass 関数内で、関数のようなものを使用してthis.removeTheListener、特定の mouseMove 関数を削除するにはどうすればよいですか? mouseMove 関数のパフォーマンスに関係なく、リソースが重いことはわかっていますが、私がやっていることは完璧なイベントです。

特定のリスナーだけを削除して、一度削除したら別の時点で追加し直すことはできますか?

4

2 に答える 2

11

React のすべてと同様に、鍵となるのは宣言的に考えることです。これを行う最も簡単な方法は、イベントをアタッチするかどうかに対応する状態を保存することです。(すでにそのようなフラグを持っているかもしれません!) 次に、次のようなことができます:

onMouseMove={this.state.dragging ? null : this.moving}

そして、単に書く

this.setState({dragging: true});

マウスダウンハンドラーで。

于 2013-10-14T22:38:34.917 に答える
8

React では、何か (属性、リスナーなど) を変更したい場合は、状態を更新してコンポーネントを強制的に再レン​​ダリングする必要があります。次に、その状態に基づいてレンダリングします。

これはあなたのために働くはずのコードです：

var DraggableComponent = React.createClass({

  getInitialState: function() {
    return {
     dragging: false
    };
  },

  render: function(){
    var onDrag = this.state.dragging ? this.onDrag : null;
    return (
      <div
        className="highlight-container"
        onMouseDown={this.dragStart}
        onMouseUp={this.dragEnd}
        onMouseMove={onDrag}>
        <div className="highlight">
          {this.props.children}
        </div>
      </div>
    );
  },

  dragStart: function() {
    this.setState({dragging: true});
  },

  dragEnd: function() {
    this.setState({dragging: false});
  },

  onDrag: function() {
    // ...
  }

});
于 2013-10-17T06:29:12.370 に答える