Reactjs:setState with checkbox:选中或取消选中

Question

我现在用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>
  );
 }

)};

我是否需要使用一种if statement我想要的东西？我需要this.setState.location: true在未经检查的情况下.

Answer 1

您需要在单击期间阅读复选框的状态,并将其应用于React状态.

var Foo = React.createClass({
    render: function() {
        return <input type="checkbox" onClick={this.onClick} value={!this.state.location}></input>
    },

    onClick: function(e) {
        this.setState({location: !e.target.checked});
    },

    getInitialState: function() {
        return {
            location: true
        };
    }
});