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

How to remove a specific event listener from a react.js element

本文关键字：事件 侦听器 删除 react js 元素      更新时间：2023-09-26

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

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功能的性能如何，我知道它的资源繁重，但对于我正在做的事情来说，这是一个完美的事件。

是否可以只删除特定的侦听器，然后在删除后将其重新添加到不同的时间点？

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

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

然后简单地写

this.setState({dragging: true});

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

在 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() {
    // ...
  }
});
相关文章：