我正在努力用一些输入字段数据填充我的状态。这些是我的领域：
<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，但
在这种情况下有人能帮我吗？
input元素没有响应onChange事件以及随后的state中的更改的原因是因为它们没有绑定到组件的state。
我建议您将text/number输入元素绑定到value道具，并将checkbox输入元素绑定至checked道具。因此，我们可以使用不同的方法来处理onChange事件(handleChange和handleCheckboxChange(
例如，这就是通过将输入分别绑定到value和checked来将输入与state绑定的方法。
<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
}
所有元素都缺少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} />
...
对于复选框输入，input.target.value不指示是否选中复选框。当你点击复选框时，它的值不会改变，这就是为什么你只收到默认值on的原因。您需要使用event.target.checked：
this.setState({
purchase: {
[event.target.name]: event.target.checked
}
});
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;
这是一个糟糕的方式