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

React JS checkbox does not recognize the first toggle

本文关键字：第一个 识别 JS 复选框 React      更新时间：2023-09-26

我刚刚开始检查和学习 React js，并尝试一些简单的事情。我对一个简单的复选框有问题 - 我创建了一个事件来侦听更改并更新其状态，但问题是应用程序无法识别第一次切换复选框。例如：- 我用默认的检查状态渲染它- 我点击它取消选中它，控制台日志为真（应该是假的）- 我再次单击它以检查它，控制台日志为 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/

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

任何帮助将不胜感激。

在这种情况下，

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

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

Example

相关文章：