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?