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

Question

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

<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);
  };

我的问题，当我单击复选框时，它作为值变为真，但是当我再次取消选中该复选框时，它作为值再次变为真。

我不知道为什么会这样。如果不单击任何复选框，它将返回false作为值，而当我单击时，它将作为值重新运行true，但是问题是，当我取消选中复选框时，它仍然为true

在这种情况下有人可以帮助我吗？

Answer 1

您缺少所有元素的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} />
...

Answer 2

[您的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 
} 

Answer 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" value={this.state.purchase.is_published} onChange={this.handleChange} name="is_published" />

您在此行中更改状态

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

这是一个坏方法

Answer 4

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

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