Question

我想知道，将事件监听器添加到DOM元素的最佳做法是什么，它不是由react（单选按钮）呈现的我有一个给定的html表单，我想使用react.js的优点，而不是使用jQuery ajax的东西。

使用jQuery，我会做类似的事情：

 $('input[type=radio][name=bedStatus]').change(function() {....}

我应该使用react（）

来使用这样的东西

componentDidMount: function() {
    if (this.props.onWindowScroll) window.addEventListener("scroll", this.handleScroll);
},

componentWillUnmount: function() {
    if (this.props.onWindowScroll) window.removeEventListener("scroll", this.handleScroll);
}

有人能把我推向正确的方向吗？

Cheers Kai

Answer 1

对于组件创建的反应元素：

render() {
  return (
    <div>
      <input type="radio" onChange={this.handleChange} />
    </div>
  )
}

就最佳做法而言，通常非反应元素应为window或document。如果它是一个HTML元素，那么它可能应该包含在react组件中，并且事件监听器应该如上所述。

对于非反应元素，您的方法非常好。在卸载组件时删除侦听器非常重要。

侦听器通常在安装组件后附加：

componentDidMount: function() {
    if (this.props.onWindowScroll) window.addEventListener("scroll", this.handleScroll);
}

重要：卸载时移除：

componentWillUnmount: function() {
    if (this.props.onWindowScroll) window.removeEventListener("scroll", this.handleScroll);
}

我重申，通常会在window或document个对象上附加事件。

根据您的使用情况，可以接受父元素或子元素的HTML元素，甚至动态创建的某些元素。 findDOMNode()在某些情况下可能很有用。但建议尽可能避免这样做。

react.js事件监听器对无反应元素

1 个答案: