Checkbox onCheck doesn't fire

Question

I have a checkbox from material-ui that doesn't fire onCheck event.

<Checkbox
  label="label"
  onCheck={onCheck}
  checked={currentDocument.ispublic}
/>


function onCheck() {
  currentDocument.ispublic = !currentDocument.ispublic;
  console.log("onCheck");
}

I tried removing checked property as described in this question: React Checkbox not sending onChange

currentDocument is an observable object stored in my store.

"currentDocument is an observable object stored in my store." Does it allow you to mutate it ? — Dyo, Feb 20 '18 at 13:54
@Dyo I changed checked to false, but the event still doesn't fire. — Elminday, Feb 20 '18 at 14:07
@Elminday Your given example works for me. Perhaps you could provide more of the surrounding component or a full reproduction? — Jules Dupont, Feb 20 '18 at 22:11

score 2 · Answer 1 · answered Feb 20 '18 at 22:33

2

Can it be because based on https://material-ui-next.com/api/checkbox/#checkbox material-ui is exposing onChange not onCheck?

answered Feb 20 '18 at 22:33

jCobb

238
1
9

1

`material-ui@next` and `material-ui` are not same package – FisNaN Feb 21 '18 at 02:31
`material-ui` Checkbox exposes `onChange` not `onCheck`. – see sharper Oct 30 '19 at 03:43

score 0 · Answer 2 · answered Feb 21 '18 at 02:12

Without the full content, there is no way to test your code. But there are some possible errors:

Where do onCheck and currentDocument come from? If it's in the component class, you need put this keyword.
Use arrow function for onCheck, otherwise, you can't access this without .bind(this)
The component class should have decorator @observer and currentDocument should have @observable

The code below is one possible answer, but I'm not sure what behavior you expected, so I didn't test. However, with MobX, the syntax is correct.

@observer
class MyCheckBox extends React.Component {
  @observable currentDocument = {
    ispublic: false,
  };

  render() {
    return(
      <Checkbox
        label="label"
        onCheck={this.onCheck}
        checked={this.currentDocument.ispublic}
      />
    );
  }

  onCheck = () => {
    this.currentDocument.ispublic = !this.currentDocument.ispublic;
  }
}

Checkbox onCheck doesn't fire

2 Answers2