Reactjs：带复选框的setState：已选中或未选中

Question

我目前正在用Reactjs“测试水域”。基于their docs，我掀起了一个我坚持不懈的小项目。到目前为止，当复选框被选中，状态变化，但....不知道如何改变未选中状态：

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

您需要点击期间读的复选框的状态，并应用到你的阵营状态。

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 
     }; 
    } 
});