Question

我有一个来自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是存储在我商店中的可观察对象。

Answer 1

可以吗？因为基于https://material-ui-next.com/api/checkbox/#checkbox材料-ui正在暴露onChange而不是onCheck？

Answer 2

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

onCheck和currentDocument来自哪里？如果它在组件类中，则需要放置this关键字。
使用onCheck的箭头功能，否则，如果没有this

.bind(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;
  }
}

Checkbox onCheck不会触发

2 个答案: