无法获得复选框的正确状态

Question

发生了一些奇怪的事情。我使用 foundation switch 作为我的复选框。

当我在 React 浏览器工具上查看我的状态时，我的检查状态为 true。当我在处理程序中控制台记录状态时，它是错误的。错误在哪里？

es6:

constructor(props){
  super(props);
  this.state = {
    checked: false
  },
  this._handleChange = this._handleChange.bind(this)
}

_handleChange(){
  this.setState({ checked: !this.state.checked });
  console.log(this.state.checked); // becomes the opposite the state!
}

渲染：

<div className="switch">
  <input className="switch-input" id="exampleSwitch" type="checkbox" onChange={this._handleChange} checked={this.state.checked} name="exampleSwitch">
  <label className="switch-paddle" htmlFor="exampleSwitch">
    <span className="show-for-sr">Download Kittens</span>
  </label>
</div>

单击时，我的 React 控制台显示为 true，但在控制台中显示为 false。 console.log() 表示相反的状态。如果状态为 false，则日志显示 true。有什么原因吗？

编辑另一种方法：

_onSubmit(){
 let checked = this.state.checked;
 $.ajax({
  ...
  data: {"checked": checked },
  ...
 });
}

Answer 1

来自 React documentation:

setState() does not immediately mutate this.state but creates a pending state transition. Accessing this.state after calling this method can potentially return the existing value.

所以 console.log() 在这里可能会以意想不到的方式工作。为了获得正确的结果，您可能希望将第二个参数传递给 setState():

The second (optional) parameter is a callback function that will be executed once setState is completed and the component is re-rendered.

_handleChange(){
  this.setState({ checked: !this.state.checked }, () => {
    console.log(this.state.checked); // output will be as expected
  });  
}

Answer 2

setState() 不是同步操作，因此 API 使您能够在 时给它一个回调来做某事setState() 完成。下面的示例使用未经测试的代码。文档：Facebook setState() documentation.

var Component = React.createClass({
      getInitialState: function() {
        return ({
          initialState: true
        });
      },
      changeState: function() {
        this.setState({
          initialState: false
        }, function() {
          console.log(this.state.initialState); // this is the callback
        });
      },
      render: function() {
          return ( 
            <button type="button" onClick = {this.changeState}> Test component </button>
          );
  }                                
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

无法获得复选框的正确状态

Cannot get correct state of checkbox

javascript

zurb-foundation

reactjs