我们正在尝试添加一个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);
}
Where this.props.updateIds
是一个修改父组件状态的传递函数。
问题是这个函数在页面加载期间被调用了大约 10 次,这不是我们想要的。我认为只有在修改实际复选框元素时才会调用它?
通过这样声明onChange={this.handleSelectAllChange(ids)}
方法调用在渲染时立即发生CheckBox
。使用 ES6,你可以通过使用来避免这种情况
onChange={() => this.handleSelectAllChange(ids)}
这意味着您传递了一个新函数,该函数将调用handleSelectAllChange
关于改变。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)