如何从react.js元素中删除特定的事件侦听器

Question

我正在使用这个简单的渲染函数和几个处理程序:

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.removeTheListenerfunction的方法,然后如何删除特定的mouseMove函数？无论mouseMove函数的性能如何,我都知道它的资源很重,但是我正在做它的完美事件.

是否可以仅删除特定的侦听器,然后一旦删除就将其添加回不同的时间点？

Answer 1

与React中的所有内容一样,关键是要以声明的方式进行思考.最简单的方法是存储一些与您是否要附加事件相对应的状态.(你可能已经有了这样的旗帜!)然后你可以这样做:

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

然后简单地写

this.setState({dragging: true});

在你的mousedown处理程序中.

Answer 2

在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() {
    // ...
  }

});