React JS 复选框无法识别第一个切换答案

【问题标题】：React JS checkbox does not recognize the first toggleReact JS 复选框无法识别第一个切换
【发布时间】：2016-06-02 04:49:08
【问题描述】：

我刚刚开始检查和学习 React js，并尝试用它做一些简单的事情。我有一个简单复选框的问题 - 我创建了一个事件来监听更改并更新它的状态，但问题是应用程序在第一次切换复选框时无法识别。例如： - 我用默认选中状态渲染它 - 我点击它取消选中它并且控制台记录true（应该是false） - 我再次单击它进行检查，控制台记录 true（现在这是正确的 - 从那里它返回正确的状态。

这是我的示例代码：

var CheckboxElement = React.createClass({

  handleChange: function(e) {

    this.setState({
      checked: !e.target.checked
    });

    console.log(this.state.checked);
  },

  getInitialState: function() {
    return {checked: false};
  },

  render: function() {
    return (
      <label><input type="checkbox" defaultChecked={this.state.checked} onChange={this.handleChange} />{this.props.optionVal}</label>
    )
  }
});

ReactDOM.render(
  <CheckboxElement optionVal="Test" />,
  document.getElementById('container')
);

这是一个带有我的代码的 jsFiddle： https://jsfiddle.net/velio84/zro3x9eg/1/

您可以检查浏览器的控制台以查看输出。

任何帮助将不胜感激。

【问题讨论】：

标签： javascript checkbox reactjs toggle

【解决方案1】：

在这种情况下，您不需要添加!，因为当您首先检查e.target.checked 时，值将是false（或true，这取决于初始状态）并且状态将具有值true (!false === true) 或 false(!true === false)，正如我所写，这取决于您为 defaultChecked 属性设置的初始值

this.setState({
  checked: e.target.checked
});

Example

【讨论】：