基于React中数组的复选框：受控组件与非受控组件

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

但这会返回警告：

  

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

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

Answer 1

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

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

Answer 2

您为状态设置了初始值吗？如果没有，那可能就是问题所在。如果尚未设置this.state，则您的输入最初不受控制。像这样设置组件的初始状态：

  constructor(props) {
    super(props);
    this.state = { values: ['foo', 'bar', 'baz'] };
  }