javascript - React : controlled vs uncontrolled component 中基于数组的复选框

Question

我在状态中有一组值，例如:

['foo', 'bar', 'baz'] // in this.state.values

这个值数组用于控制复选框的状态。因此，共有三个复选框，每个复选框都有一个 onChange 属性，如下所示:

<input
   type="checkbox"
   name={name}
   onChange={this.handleChange}
/>

handleChange 方法只是在数组中添加或删除值。

我天真地认为我可以检查数组中值的存在以了解复选框是否被选中。所以我这样做了:

<input
   type="checkbox"
   name={name}
   checked={this.state.values.find(e => e === name)}
   onChange={this.toggle}
/>

但这会返回一个警告:

Warning: A component is changing a controlled input of type checkbox to be uncontrolled. Input elements should not switch from controlled to uncontrolled (or vice versa). Decide between using a controlled or uncontrolled input element for the lifetime of the component.

我不确定是否理解，因为我认为该组件仍然受控... checked 条件是基于状态的，所以我认为它可以工作。如何通过仍然继续使用数组作为引用来避免此警告？

Answer 1

您应该使用 array.includes 而不是在数组中查找。您的问题与this相关React 中的错误已在新版本中删除。

我已经为你创建了一个沙箱。