Why onchange function not working with semantic class

Question

I using reactjs and semantic ui and want to call a OnChange function on input checkbox:

App.js

getChecked = (e) => {
    if(e.target.checked === true){
        this.setState({
            rent: '1'
        });
    } else {
        this.setState({
            rent: '0'
        });
    }
    console.log(e);
};

..

<Input onChange={this.getChecked} type="checkbox" name="isRent" id="isRent" value={this.state.rent}/>

This code working perfectly JSFiddle

But when I use checkbox class from semantic ui on this input, onChange function not working anymore JSFiddle

Before:

<input type="checkbox" onChange={this.getChecked}/>

After:

<div className="ui slider checkbox">
<input type="checkbox" onChange={this.getChecked}/>
</div>

Any idea for why it now working?

You are mixing jQuery with react, this line is messing it up $('.checkbox').checkbox(); probably jQuery adding its own handler to it and so ignoring you function. Don't use jQuery anymore! — Michelangelo
– Michelangelo, Commented Aug 18, 2019 at 20:51

makkBit · Accepted Answer · 2019-08-18 21:25:00Z

1

This is because when semantic ui classes is applied, input get z-index value of -1. (try inspecting it).
So, now input never gets clicked, hence onChange function is not invoked.

What you could do this, make the checkbox controlled.

  state = { checked: false }
  toggle = () => this.setState(prevState => ({ checked: !prevState.checked }))

  render() {
    return (
      <div className="ui slider checkbox" onClick={this.toggle}>
        <input type="checkbox" checked={this.state.checked}/>
      </div>
    )
  }

edited Aug 18, 2019 at 21:25

answered Aug 18, 2019 at 21:08

makkBit

3933 silver badges15 bronze badges

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

Collectives™ on Stack Overflow

Why onchange function not working with semantic class

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related