How to get values ​​/ properties from reaction-bootstrap block?

Question

I am trying to use check-check ( https://react-bootstrap.imtqy.com/components.html#forms-controls ) and I need to fire an event when it changes state, It would also be great to be able to programmatically delete / check it and / or check if it is checked. Unfortunately, when the code is translated and rendered, it transfers input to the div.

How can I find this in dom and manipulate it?

My code looks something like this:

import React, { PropTypes } from 'react'; import { Checkbox } from 'react-bootstrap'; const EditItem = (props) => { return ( <div> <Checkbox style={{ marginLeft: '15px' }} >{props.itemLable}</Checkbox> </div> ); }; export default EditItem; 

And the browser does this:

 ... <div class="checkbox" style="margin-left: 15px;"> <label> <input type="checkbox"> </label> </div> ... 

I see inputRef prop in the documentation, but I can not find any examples of this or make it work on its own.

Answer 1

There are two methods: the React method and the not-so-react method.

The React method is to establish the child state of the component, passing it to the requisites and respond to changes in its state by adding event handlers. In the case of a flag, this means setting the details checked and onChange .

Notice in the following example how the parent component (application) monitors the state of the checkbox and can set it using this.setState and request it using 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 link to the rendered DOM element and directly access the checked property. I do not recommend this because it necessarily pollutes your beautiful React functional code with bad imperative code. However, with React-Bootstrap, you can do this by setting inputRef prop, as in the example below:

 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> 

Answer 2

Have you tried setting the onChange property to your checkbox?

 handleChange(event) { this.setState(*set checkbox state here*); } <Checkbox onChange={this.handleChange}></Checkbox> 

Answer 3

Thanks for the above answers. I summarized a bit of what was said for use when you have several checkboxes in this 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, }); }