Javascript Reactjs:setState带有复选框：已选中或未选中

我目前正在用Reactjs“试水”。基于此，我已经制定了一个小项目，我一直在坚持。到目前为止，当选中复选框时，状态会更改，但…不确定如何更改未选中的状态：

var Foo = React.createClass{(
 getInitialState: function() {
    return {
      location: true,
    }
  },

 onClick: function() {
  this.setState({ location: false });
 },

 render: function() {

    var inlineStyles = {
      display: this.state.location ? 'block' : 'none'
    };
  return (
   <div>
    <input type="checkbox"
     onClick={this.onClick}
    /> show / hide bar
    <hr />
    <div style={inlineStyles}>
     <p>bar</p>
    </div>
   </div>
  );
 }

)};

var Foo=React.createClass{(
getInitialState:函数（）{
返回{
地点：对，
}
},
onClick:function（）{
this.setState（{location:false}）；
},
render:function（）{
变量inlineStyles={
显示：this.state.location？'block'：'none'
};
返回(
显示/隐藏栏

酒吧

);
}
)};

---

我是否需要使用

if语句
来实现我想要的类型？取消选中时，我需要
this.setState.location:true
。
您需要在单击过程中读取复选框的状态，并将其应用于您的反应状态

var Foo = React.createClass({
    render: function() {
        return <input type="checkbox" onClick={this.onClick} checked={!this.state.location}></input>
    },
    
    onClick: function(e) {
        this.setState({location: !e.target.checked});
    },
    
    getInitialState: function() {
        return {
            location: true
        };
    }
});

var Foo=React.createClass({
render:function（）{
返回
},
onClick：函数（e）{
this.setState（{location:！e.target.checked}）；
},
getInitialState:函数（）{
返回{
地点：对
};
}
});
正确使用
checked={！this.state.location}
替代。我正在玩
值，但我无法理解。这是有道理的。您可能需要将
getInitialState
更改为
true
。我编辑了答案，花了一段时间才弄明白为什么它不起作用