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

Question

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

这是我的示例代码：

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/

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

如有任何帮助，我们将不胜感激。

Answer 1

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

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

Example

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

React JS checkbox does not recognize the first toggle

javascript

checkbox

toggle

reactjs