如何从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函数的性能如何，我知道它的资源消耗很大，但对于我正在做的事情来说，它是完美的事件。

是否可以仅删除特定的监听器，然后在不同的时间点再次添加它？

- asherrard

Answer 1

就像React中的所有内容一样，关键是要以声明式的方式思考。最简单的方法是存储一些状态来对应您是否想要附加事件。（您可能已经有这样一个标志！）然后您可以执行以下操作：

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

然后只需写下：

this.setState({dragging: true});

在你的鼠标按下处理程序中。

- Sophie Alpert

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

});

- Mouad Debbar

---

你发布的内容基本上就是我设置我的方式，我交换了Ben的null和this.moving函数的位置。这样就解决了问题。这两个答案都很好，但我觉得你的答案增加了更多的上下文。 - asherrard