Function onChange for Checkbox in ReactJs

Question

I want to know is it possible to access the next or prev element in ReactJs?I have two inputs by labels a and b.In handlerChecked function I want to check the attribute checked of both inputs.For example I checked a and I want also to check b was checked or not. How can I do it?

class App extends React.Component {
 constructor(props) {
    super(props);
    this.state = {
        data: [],
        .
        .
        .
    }
}
       .
       .
       .

handlerChecked = (e, elem) => {
    let isChecked = e.target.checked
    let value = e.target.value
    let checknext = e.target.next('input').checked //In this part I want to check the attribute checked of other Input//// 
}

.
.
.
render() {
    return (
        <div>
            <input type="checkbox" className="" value="0" onChange={this.handlerChecked} /> <label><span>a</span></label>
            <input type="checkbox" className="" value="1" onChange={this.handlerChecked} /> <label><span>b</span></label>

        </div>
    )
}
}
ReactDOM.render(<App />, document.getElementById('Result'))

You should not work with DOM Elements directly. It's not how React works. What you should do is to use state and props to handle VirtualDOM updates. React will make all DOM updates for you. — Ivan Burnaev
– Ivan Burnaev, Commented Apr 27, 2019 at 7:27

Lin Du · Accepted Answer · 2019-04-27 14:02:20Z

3

The short answer is no, React doesn't work that way, you can't go up and down an element's ancestor's tree to find sibling elements.

A common way to implement this feature is to give each checkbox a name attribute.

For example:

  <div>
    <input name="check1" type="checkbox"  onChange={this.handlerChecked} checked={this.state.check1} /> <label><span>a</span></label>
    <input name="check2" type="checkbox" onChange={this.handlerChecked} checked={this.state.check2} /> <label><span>b</span></label>
</div>

handle these two checkboxes with one handler

const handlerChecked = (e) => {
  const {name, checked} = e.target
  this.setState({
    [name]: checked
  })
}

then in your state keep track of those 2 names like this:

this.state = {
 check1: false,
 check2: false
}

edited Apr 27, 2019 at 14:02

Lin Du

104k138 gold badges340 silver badges575 bronze badges

answered Apr 27, 2019 at 7:23

mxdi9i7

6974 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

sahar Over a year ago

Thanks @mxdi9i7 for your answer , But I did not get how I can check the attribute checked of each input by your code.

Ivan Burnaev Over a year ago

The point is to have state properties for the all checkboxes. You shouldn't work with DOM elements directly, you're killing all React's optimizations for render and reconciliation process.

mxdi9i7 Over a year ago

@sahar when you invoke the onChange listener on the checkbox, the callback function handlerChecked will be called with a parameter e, that's the event of change. From that e you can find the target and thus the checked value of that checkbox. You can see the implementation from the second code block.

mxdi9i7 Over a year ago

@sahar glad I helped! Kindly accept my answer if it solves your question.

Collectives™ on Stack Overflow

Function onChange for Checkbox in ReactJs

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related