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

发生了一些奇怪的事情。我使用foundation switch作为我的复选框。无法获取正确的复选框状态

当我在反应浏览器工具上查看我的状态时，我的检查状态为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>

点击时，我的反应控制台显示它作为true但在控制台，它的false。 console.log()显示与该州相反。如果状态为false，则日志显示true。任何原因？

编辑为另一个方法：

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

来源

2016-09-15 Sylar

从阵营documentation：

的setState（）不立即发生变异this.state但创建未决状态转变。调用方法后访问this.state可能会返回现有值。

因此console.log()可能在这里以意想不到的方式工作。为了得到正确的结果，你可能想第二个参数传递到您的setState()：

第二个参数（可选）是一个回调函数，这将是一次的setState完成执行和组件进行重新渲染。

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

来源

2016-09-15 19:40:59

啊。好。但我需要知道，如果状态是错误的，我可以用ajax发送。 – Sylar

谢谢。在使用ajax调用的另一种方法中，我可以安全地使用'this.state.checked'？ – Sylar

@Sylar请更新你的问题，我不知道你在说什么'另一种方法，它看起来如何等等。谢谢！ –

的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>

来源

2016-09-15 20:03:51 diaz994

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

回答

相关问题