Question

我正在使用React并且我有旧式的代码来处理某些事件：

componentDidMount = () => {
   document.addEventListener('mousedown', this.handleClick);
}

componentWillUnmount = () => {
  document.removeEventListener('mousedown', this.handleClick);
}

这是在React中设置事件处理程序的正确方法吗？我的意思是最佳实践。您如何以React的方式重构上述代码？我理解当我们在个别元素上设置事件时，但在这种特殊情况下我感到困惑。

Answer 1

理想情况下，在React中，您永远不会自己编辑DOM。您应该只更新虚拟DOM，然后让React处理对DOM的更改。

在单击文档的任何部分时，您似乎想要调用this.handleClick（）。你可以用“React”方式处理它的一种方法是将onClick prop添加到容器中，就像这样...

class App extends Component {
   constructor() {
      this.handleClick = this.handleClick.bind(this);
   }
   render() {
      return (
         <div className="container" onClick={this.handleClick}=>
            //...the rest of your app
         </div>
      )
   }
}

然后确保设置边距/填充以确保div覆盖整个页面。

Answer 2

在反应中，你不应该将eventListeners直接绑定到DOM，因为反应提供了synthetic events，可以并且应该使用它，并让其他人做出反应。

有关合成事件的更多详细信息，请参见React docs

因此，在组件中，您可以将参数传递给组件onMouseDown并处理其单击处理程序，如：

class SomeClass extends Component {
  constructor(props) {
    super(props)

    this.mouseDownHandler = this.mouseDownHandler.bind(this)
  }

  mouseDownHandler() {
    // do something
  }

  render() {
    return (
      <div
        onMouseDown={this.mouseDownHandler}
      >

      </div>
    )
  }
}

希望这有帮助。

Answer 3

在React中设置事件处理程序是否正确？

您正在做的事情很好。

您将如何在React中重构以上代码-做事的方式？

理想情况下，您将尽可能使用React提供的DOM事件，但是由于这是一个全局文档，请单击监听器，这样您的代码是正确的。

反应事件处理，最佳实践

3 个答案: