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属性<设置的初始值/ p>

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

Example

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

1 个答案: