0

I've built one of Bootstrap 4's custom checkboxes which looks like this:

<div className="custom-control custom-checkbox">
    <input onChange={ (evt) => { console.log("CHANGED") }}
        type="checkbox" 
        className="custom-control-input" 
        id="barChartsCheckbox" />
    <label className="custom-control-label" htmlFor="barChartsCheckbox">Bar Charts</label>
</div>

I'm using React, so I want to detect a change in state to re-render the page, but the onChange event is not triggered.

As far as I understand, Bootstrap's custom checkboxes work by applying a :checked pseudoclass, so is it possible to catch that change via an onChange function?

EDIT

It seems that applying an onChange listener via jQuery works, as per this question

$('.custom-control-input').on('change', evt => {
    console.log("test");
})

So why doesn't the onChange attribute work in React?

Rory Byrne
  • 923
  • 1
  • 12
  • 22

0 Answers0