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