在页面加载期间多次调用 React onChange 处理程序答案

【问题标题】：React onChange handler is being called multiple times during page load在页面加载期间多次调用 React onChange 处理程序
【发布时间】：2017-10-16 14:42:34
【问题描述】：

我们正在尝试将 onChange 处理程序添加到我们的自定义组件之一 - 即 Checkbox 组件（它是自定义组件的唯一原因是我们可以有效地封装 intermediate HTML属性）。它看起来像这样：

<Checkbox
  id="select-all"
  onChange={this.handleSelectAllChange(ids)}
  indeterminate={isIndeterminate}
  checked={areVisibleItemsSelected}
  disabled={isDisabled}
/>

处理函数的结构有点像这样：

handleSelectAllChange(ids) {
  // omitted code that filters on ids and produces newIds

  this.props.updateIds(newIds);
}

其中this.props.updateIds 是修改父组件状态的传递函数。

问题是这个函数在页面加载过程中被调用了大约 10 次，这不是故意的。我以为只有在修改实际的复选框元素时才调用它？

【问题讨论】：

标签： html reactjs state jsx

【解决方案1】：

我刚刚遇到了同样的问题...我能够解决阻止事件传播的问题。在你的 onChange 事件调用的函数中添加这个：

e.stopPropagation();

【讨论】：

这个答案为我节省了很多时间！我已经花了大约 45 分钟试图解决这个错误。谢谢@rii
我很高兴@AdimVictor 我确信我可能花了几个小时试图弄清楚这一点。我记得当时特别痛苦。

【解决方案2】：

this.handleSelectAllChange(ids) 表示调用函数。
您应该将 函数对象 传递给事件处理程序。例如()=>{this.handleSelectAllChange(ids)}

【讨论】：

【解决方案3】：

您应该在元素本身内部定义 onClick，并将指针传递给处理函数：

function Checkbox(props) {
  return (<input type="checkbox" value={props.value} key={props.value} 
    onClick={props.clickHandler} />); // actual onclick
}

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      boxes: ['1', '2', '3'],
    }
  }
  
  handleSelectAllChange(box) {
    console.log(box)
  }
  
  render() {
    const boxes = this.state.boxes.map((b,i) => 
    	<Checkbox value={b} 
        clickHandler={this.handleSelectAllChange.bind(this, b)} // pass click handler
        key={i}/>
    );
    return (
      <div>
         {boxes}
      </div>
    );
  }
}

ReactDOM.render(<App/>, 
	document.querySelector('#app'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id="app">Loading...</div>

【讨论】：

【解决方案4】：

通过像这样onChange={this.handleSelectAllChange(ids)} 声明它，方法调用在渲染CheckBox 时立即发生。使用 ES6，您可以通过使用

来避免这种情况

onChange={() => this.handleSelectAllChange(ids)}

这意味着您传递了一个新函数，该函数将在更改时调用 handleSelectAllChange。

【讨论】：

【解决方案5】：

像这样传递处理函数

<Checkbox
  id="select-all"
  onChange={this.handleSelectAllChange.bind(this,ids)}
  indeterminate={isIndeterminate}
  checked={areVisibleItemsSelected}
  disabled={isDisabled}
/>

【讨论】：