如何从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.removeTheListener函数，我将如何删除特定的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() {
    // ...
  }

});