Reactjs: setState with checkbox: отмечен или не отмечен

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

Вам необходимо прочитать состояние флажка во время щелчка и применить его к своему состоянию 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 
     }; 
    } 
});