javascript - React onLoad 回调应该设置元素的状态，但不这样做，因为 onLoad 没有被调用

Question

我有很多看起来像这样的自定义复选框：

<CustomCheckbox className='' name='foo' text='Foo' defaultState={false} onChange={this.handleChange} onLoad={this.handleChange}/>

哪些是这种形式的组成部分：

export const CustomCheckbox = (props) => {
  return (
    <label htmlFor={props.name} className={`customCheckboxLabel ${props.className}`}>
      <input type='checkbox' name={props.name} id={props.name} className='customCheckboxInput' onChange={props.onChange} onLoad={props.onLoad} defaultChecked={props.defaultState}/>
      <span>{props.text}</span>
    </label>
  )
}

改变：

handleChange = e => this.setState({ [e.target.name]: e.target.checked })

就 而言onChange，这可以正常工作，但是不会调用 onLoad 。我实际上希望 onChange 和 onLoad 是相同的功能，这样，复选框将自动使用其（最初未选中的）值填充状态，并在用户选中它们时将它们更新为选中状态。

我想这样做的原因是我稍后需要提交整个复选框数组（选中和未选中）。复选框的数量和值可能会定期更改，因此我不想为foo: false页面构造函数中的每个复选框定义，因为这似乎违反了 DRY（并且会很痛苦，因为添加了一个复选框意味着添加组件，并将其添加到初始状态）

期望的行为：

handleChange 在每个复选框最初加载时调用，以便状态包含name: initialstate每个复选框，handleChange 在更改时再次调用，以记录复选框状态是否从初始状态更改。

当前行为：

onLoad 函数永远不会被调用。

标签： javascriptjquery