Question

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

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

输入值设置为this.state.confirmCheck，与React docs一致（https://reactjs.org/docs/forms.html），并且shows元素中的值正确切换，但是当我在console.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

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

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

Answer 3

我测试了你的代码，你所做的唯一错误就是git checkout --hard <SHA>中的错误，它应该是render method而不是this.RenderEditForm()，而且一切似乎都运转良好

输入类型复选框问题：第一次单击时checkbox.value和setState工作不正确

3 个答案: