Javascript 反应事件处理，最佳实践

我使用的是

React

，我有一种老式的代码来处理一些事件：

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

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

---

在

React

中设置事件处理程序是否正确？我指的是最佳实践。您将如何以

React

的方式重构上述代码？当我们在单个元素上设置事件时，我理解这一点，但在这种特殊情况下我感到困惑。

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

似乎您希望在单击文档的任何部分时调用此.handleClick（）。您可以用“React”的方式处理这个问题的一种方法是在like-so中向容器添加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>
      )
   }
}

类应用程序扩展组件{
构造函数（）{
this.handleClick=this.handleClick.bind（this）；
}
render（）{
返回(
//…应用程序的其余部分
)
}
}

---

然后确保边距/填充的设置方式确保您的div覆盖整个页面。

在react中，您不应该将eventListeners直接绑定到

DOM

，因为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>
    )
  }
} 

class SomeClass扩展组件{
建造师（道具）{
超级（道具）
this.mouseDownHandler=this.mouseDownHandler.bind（this）
}
mouseDownHandler（）{
//做点什么
}
render（）{
返回(
)
}
} 

希望这有帮助

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

你现在做的很好

您将如何以React-way的方式重构上述代码

理想情况下，如果可能，您可以使用React提供的DOM事件，但由于这是一个全局文档单击侦听器，因此您的代码是正确的。
好的，但是这些stackoverflow答案如何：我想，像resize这样的事件不在当前网站的范围内，因此您必须将事件侦听器附加到窗口。但这些活动都在网站的范围之内。