How to get values/properties from a react-bootstrap checkbox?
There are two ways: The React way and the not-so-React way.
The React way is to set the child component's state by passing it props and respond to changes in its state by attaching event handlers. In the case of Checkbox, that means setting the checked and onChange props.
Note in the below example how the parent component (App) keeps track of the Checkbox's state and can both set it with this.setState and query it with this.state.checkboxChecked.
const { Checkbox, Button } = ReactBootstrap;class App extends React.Component { constructor() { super(); this.state = { checkboxChecked: false }; this.handleChange = this.handleChange.bind(this); this.handleIsItChecked = this.handleIsItChecked.bind(this); this.handleToggle = this.handleToggle.bind(this); } render() { return ( <div> <Checkbox checked={this.state.checkboxChecked} onChange={this.handleChange} /> <Button type="button" onClick={this.handleToggle}>Toggle</Button> <Button type="button" onClick={this.handleIsItChecked}>Is it checked?</Button> </div> ); } handleChange(evt) { this.setState({ checkboxChecked: evt.target.checked }); } handleIsItChecked() { console.log(this.state.checkboxChecked ? 'Yes' : 'No'); } handleToggle() { this.setState({ checkboxChecked: !this.state.checkboxChecked }); }}ReactDOM.render(<App/>, document.querySelector('div'));<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css"><script src="//cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script><script src="//cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script><script src="//cdnjs.cloudflare.com/ajax/libs/react-bootstrap/0.30.8/react-bootstrap.min.js"></script><div></div>The not-so-React way is to get a reference to the rendered DOM element and access its checked property directly. I don't recommend this, because it necessarily pollutes your lovely functional React code with icky imperative code. Nevertheless, with React-Bootstrap you can do it by setting the inputRef prop, as in the below example:
const { Checkbox, Button } = ReactBootstrap;class App extends React.Component { constructor() { super(); this.handleIsItChecked = this.handleIsItChecked.bind(this); this.handleToggle = this.handleToggle.bind(this); } render() { return ( <div> <Checkbox onChange={this.handleChange} inputRef={ref => this.myCheckbox = ref} /> <Button type="button" onClick={this.handleToggle}>Toggle</Button> <Button type="button" onClick={this.handleIsItChecked}>Is it checked?</Button> </div> ); } handleIsItChecked() { console.log(this.myCheckbox.checked ? 'Yes' : 'No'); } handleToggle() { this.myCheckbox.checked = !this.myCheckbox.checked; }}ReactDOM.render(<App/>, document.querySelector('div'));<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css"><script src="//cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script><script src="//cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script><script src="//cdnjs.cloudflare.com/ajax/libs/react-bootstrap/0.30.8/react-bootstrap.min.js"></script><div></div>
Thanks for the above answers. I generalized the above slightly for use when you have more than one checkbox in a given component:
constructor() { super(); this.state = { YourInputName: false }; this.handleCheckboxChange = this.handleCheckboxChange.bind(this); } render() { return ( <div> <Checkbox name="YourInputName" onChange={this.handleCheckboxChange} /> </div> ); } handleCheckboxChange(event) { const target = event.target const checked = target.checked const name = target.name this.setState({ [name]: checked, }); }
Have you tried setting an onChange property to your checkbox?
handleChange(event) { this.setState(*set checkbox state here*);}<Checkbox onChange={this.handleChange}></Checkbox>