反应事件处理，最佳实践

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道具添加到容器中，例如...

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

在 react

中，你不应该将 eventListeners 直接绑定到DOM，因为 react 提供了可以而且应该使用的synthetic events，让 react 处理其余的。

有关合成事件的更多详细信息，这里是 React 文档

因此，在您的组件中，您可以将参数传递给您的组件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 事件，但由于这是一个全局文档点击侦听器，那么你的代码是正确的。