复选框 onCheck 不触发答案

【问题标题】：Checkbox onCheck doesn't fire复选框 onCheck 不触发
【发布时间】：2018-07-30 20:27:47
【问题描述】：

我有一个来自 material-ui 的复选框，它不会触发 onCheck 事件。

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


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

我尝试按照这个问题的描述删除选中的属性：React Checkbox not sending onChange

currentDocument 是存储在我的商店中的可观察对象。

【问题讨论】：

尝试绑定你的方法 oncheck={method.bind(this)}
Jsx 道具不应使用 bind()
"currentDocument 是存储在我的商店中的可观察对象。"它是否允许您对其进行变异？
@Dyo 我将检查更改为 false，但事件仍然没有触发。
@Elminday 你给的例子对我有用。也许您可以提供更多的周边组件或完整的复制品？

标签： javascript reactjs material-ui mobx

【解决方案1】：

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

【讨论】：

material-ui@next 和 material-ui 不是同一个包
material-ui 复选框公开onChange 而不是onCheck。

【解决方案2】：

没有完整的内容，就无法测试您的代码。但是有一些可能的错误：

onCheck 和 currentDocument 来自哪里？如果是在组件类中，需要加上this关键字。
onCheck使用箭头功能，否则，没有.bind(this)就无法访问this
组件类应该有装饰器@observer和currentDocument应该有@observable

下面的代码是一个可能的答案，但我不确定你期望什么行为，所以我没有测试。但是，对于 MobX，语法是正确的。

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

【讨论】：