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

Question

我刚刚开始检查和学习 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/

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

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

Answer 1

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

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

Example