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

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

来避免这种情况

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

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