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

Question

我们正在尝试将 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 次，这不是预期的。我以为只有当实际的复选框元素被修改时才会被调用？

Answer 1

像这样传递处理函数

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

Answer 2

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

来避免这种情况

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

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

Answer 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>

Answer 4

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

Answer 5

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

e.stopPropagation();

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

React onChange handler is being called multiple times during page load

html

state

jsx

reactjs