javascript - 基于React中数组的复选框:受控组件与非受控组件

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

['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}
/>

但这会返回警告：


  警告：组件正在将类型为受控的复选框更改为不受控制。输入元素不应从受控状态切换到非受控状态（反之亦然）。确定在组件的使用寿命期间使用受控或不受控制的输入元素。


我不确定要理解，因为我认为该组件仍受控制... checked条件基于状态，因此我认为它可以工作。我如何仍然继续使用该数组作为参考来避免这种警告？

最佳答案

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

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

关于javascript - 基于React中数组的复选框:受控组件与非受控组件，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/52317054/