即使未选中，ReactJS 复选框也保持为真答案

【问题标题】：ReactJS checkbox remain true even when unchecked即使未选中，ReactJS 复选框也保持为真
【发布时间】：2020-05-03 08:00:12
【问题描述】：

我正在努力用一些输入字段数据填充我的状态。这些是我的领域：

<input type="text" onChange={this.handleChange} name="title"></input>
<input type="number" onChange={this.handleChange} name="amount"></input>
<input type="checkbox" onChange={this.handleChange} name="is_published"></input>
<input type="checkbox" name="isflat"></input>
<input type="checkbox" onChange={this.handleChange} name="isdhaka"></input>
<input type="checkbox" onChange={this.handleChange} name="isrent"></input>
<input type="text" onChange={this.handleChange} name="name"></input>

这是我的手柄更改方法

handleChange = event => {
    const { purchase } = this.state;
    purchase[event.target.name] = event.target.value;
    this.setState({ purchase });
    updateValidators(event.target.name, event.target.value);
  };

我的问题，当我点击复选框时，它作为一个值变为 true，但是当我再次取消选中该复选框时，它再次作为值保持为 true。

我不明白为什么会发生这种情况。如果不点击任何复选框，它会返回 false 作为值，当我点击时，它会返回 true 作为值，但问题是，当我取消选中复选框时，它仍然是 true

在这种情况下谁能帮助我？

【问题讨论】：

标签： reactjs redux

【解决方案1】：

您的input 元素没有响应onChange 事件以及随后state 中的更改的原因是因为它们没有绑定到组件的state。

我建议您将text/number 输入元素绑定到value 属性，并将checkbox 输入元素绑定到checked 属性。因此，我们可以有不同的方法来处理onChange 事件（handleChange 和handleCheckboxChange）

例如，您可以通过以下方式将输入与state 绑定，分别将它们绑定到value 和checked。

<input type="text" onChange={this.handleChange} name="title" value={this.state.purchase.title} />
<input type="number" onChange={this.handleChange} name="amount" value={this.state.purchase.amount} />
<input type="checkbox" onChange={this.handleCheckboxChange} name="is_published" checked={this.state.purchase.is_published} />
<input type="checkbox" name="isflat" onChange={this.handleCheckboxChange} checked={this.state.purchase.isflat} />
<input type="checkbox" onChange={this.handleCheckboxChange} name="isdhaka" checked={this.state.purchase.isdhaka} />
<input type="checkbox" onChange={this.handleCheckboxChange} name="isrent" checked={this.state.purchase.isdhaka} />
<input type="text" onChange={this.handleChange} name="name" value={this.state.purchase.name} />

此外，您应该使用setState 来更新组件的state：

handleChange(event) {
  this.setState({
    purchase: {
      [event.target.name]: event.target.value
    }
  });
  // do the rest
}


handleCheckboxChange(event) {
  this.setState({
    [event.target.name]: event.target.checked
  });
 // do the rest 
}

【讨论】：

【解决方案2】：

您的所有元素都缺少 value 属性。

你的代码应该是这样的

<input type="text" onChange={this.handleChange} name="title" value={this.state.purchase.title} />
<input type="number" onChange={this.handleChange} name="amount" value={this.state.purchase.amount} />
<input type="checkbox" onChange={this.handleChange} name="is_published" value={this.state.purchase.is_published} />
...

【讨论】：

【解决方案3】：

handleChange = event => {
  const { purchase } = this.state;
  this.setState({ purchase:  {
    ...purchase,
    [event.target.name]: event.target.value,
  });
  updateValidators(event.target.name, event.target.value);
};

并在您的复选框中设置值

<input type="checkbox" checked={this.state.purchase.is_published} onChange={this.handleChange} name="is_published" />

你在这一行改变了状态

purchase[event.target.name] = event.target.value;

这是一个坏方法

【讨论】：

【解决方案4】：

对于复选框输入，input.target.value 不表示复选框是否被选中。单击复选框时，复选框的值不会改变，这就是为什么您只收到默认值on。您需要改用event.target.checked：

this.setState({
  purchase: {
    [event.target.name]: event.target.checked
  }
});

【讨论】：