复选框 onCheck 不会触发

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.

Answer 1

可能是因为基于https://material-ui-next.com/api/checkbox/#checkbox material-ui 暴露的是 onChange 而不是 onCheck？

Answer 2

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;
  }
}