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

Posted 2023-02-21

【中文标题】在页面加载期间多次调用 React onChange 处理程序

【英文标题】：React onChange handler is being called multiple times during page load

【发布时间】：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 次，这不是故意的。我以为只有在修改实际的复选框元素时才调用它？

【参考方案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
/>