javascript - 如何从 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() {
    // ...
  }

});