输入类型复选框问题:复选框.value 和 setState 在首次单击时工作不正确

Question

我有以下简化的代码，其中包含一个复选框，旨在更改单击时的状态，但是单击时无法获得正确的值。它位于一个没有jQuery的React项目中。

状态元素 confirmCheck 初始化为 false，然后处理程序 handleConfirmClick 在单击复选框时被调用，并且调用 setState 以将 confirmCheck 转换为 true。在第一次单击时，setState 不会变为 true，但在随后的单击中，它会切换。这似乎是使用 jQuery 修复的常见问题。

输入值设置为 this.state.confirmCheck 有点符合 React 文档 (https://reactjs.org/docs/forms.html(，并且 look 元素中的值可以正确切换，但是当我控制台.log checkBox.value 时，当它在元素内为 true 时，该值为 false(！？(。

根据我的阅读，问题似乎与渲染输入的 DOM 有关，但我找不到干净的解决方案。如果所有其他方法都失败了，我可以使用变量来测试和传递点击，但如果可能的话，我想使用状态。

我做错了什么？

class Edit extends Component {
constructor(props) {
super(props);
this.state = {
confirmChecked: false
};
}
handleConfirmCheck(event) {
const checkBox = document.getElementById('editConfirmCheck');
this.setState({ confirmChecked: !this.state.confirmChecked });
console.log(this.state.confirmChecked);
//logs false on first click
console.log(checkBox);
// on first click, logs <input type="checkbox" id="editConfirmCheck" value="true">
console.log(checkBox.value);
// logs false!!?? on first click
}
renderEditForm() {
return (
<div>
<label className="confirm-radio">
<input type="checkbox" id="editConfirmCheck" value={this.state.confirmChecked} onChange={this.handleConfirmCheck.bind(this)} />  Check to confirm changes then submit
</label>
</div>
);
}
}
render() {
return (
<div>{this.renderEditForm()}</div>
);
}
}

导出默认编辑

Answer 1

这是因为 setState 是异步的。在更新和更改 DOM 之前，您的控制台日志已被调用。

Answer 2

我已经测试了您的代码，您犯的唯一错误是拼写错误，render method它应该是this.RenderEditForm()而不是this.renderEditForm()，一切似乎都很好

Answer 3

这是你想要的。 您已经关闭了RenderEditForm()方法中的类主体。 此外，您正在尝试调用从未定义过的方法。<div>{this.renderEditForm()}</div>

https://codesandbox.io/s/2vjmp10xky