React事件处理，最佳实践

Question

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

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

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

在React中设置事件处理程序的方式是否正确？我的意思是最佳实践。你会如何重构上面的代码以符合React的做法？我知道当我们在单个元素上设置事件时，但在这种特殊情况下我感到困惑。

- Nikita Vlasenko

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覆盖整个页面。

- Austin Tackaberry

Answer 2

在React中，您不应直接将事件监听器绑定到DOM上，因为React提供了可以使用和应该使用的“合成事件”，并让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>
    )
  }
} 

希望这有所帮助。

- warl0ck

---

好的，但是这些stackoverflow答案怎么样：https://dev59.com/hmMk5IYBdhLWcg3wvAVo - Nikita Vlasenko

我想，像resize这样的事件不在当前网站的范围内，所以您将不得不将事件侦听器附加到窗口。但是这些事件属于网站的范围。 - warl0ck

Answer 3

这是在React中设置事件处理程序的正确方式吗？

你所做的是完全正确的。

如何以React的方式重构上面的代码？

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

- Misha Metrikin