Javascript 语义ui react复选框的更改处理程序无效：react+；打字稿

我有两个语义ui反应复选框。当我尝试附加更改处理程序时，我在控制台日志中得到一个值“undefined”

要获取这两个复选框值

链接到沙盒：

我哪里做错了

我们将不胜感激

import React from "react";

import ReactDOM from "react-dom";

import { Checkbox } from "semantic-ui-react";

import Form from 'semantic-ui-react/dist/commonjs/collections/Form';

export default class App extends React.Component<{},{}> {
  constructor(props:any) {
    super(props);
    this.state = {
      cb1: true,
      cb2: true
    };
  }

  checkboxChangeHandler = (event: React.FormEvent<HTMLInputElement>) => {
    let name = event.target.name;
    console.log(name); // It is giving undefined here
    if (name === "cb1") {
      this.setState({ cb1: !this.state.cb1 });
    }
    if (name === "cb2") {
      this.setState({ cb2: !this.state.cb2 });
    }
  };
  render() {
    return (
      <div >
       <Form>
        <Checkbox
          label={"CB1"}
          name="cb1"
          checked={this.state.cb1}
          onChange={this.checkboxChangeHandler}
        />
        <Checkbox
          label={"CB2"}
          checked={this.state.cb2}
          name="cb2"
          onChange={this.checkboxChangeHandler}
        />
       </Form>
      </div>
    );
  }
}

从“React”导入React；
从“react dom”导入react dom；
从“语义ui反应”导入{Checkbox}；
从“语义ui react/dist/commonjs/collections/Form”导入表单；
导出默认类App扩展React.Component{
构造器（道具：任何）{
超级（道具）；
此.state={
cb1：没错，
cb2：对
};
}
checkboxChangeHandler=（事件：React.FormEvent）=>{
让name=event.target.name；
console.log（name）；//此处未定义
如果（名称=“cb1”）{
this.setState（{cb1:！this.state.cb1}）；
}
如果（名称==“cb2”）{
this.setState（{cb2:！this.state.cb2}）；
}
};
render（）{
返回(
);
}
}

您连接事件的方式和访问事件的方式是不正确的

要解决此问题，请更改：

onChange = {this.checkboxChangeHandler}

及

致：

及

（请注意，我已将“name”设为常量，因为您不需要在使用它的函数中重新分配它的值）

还要注意，您需要将更改处理程序的签名从React.FormEvent更改为React.changeent，即

checkboxChangeHandler = (event: React.ChangeEvent<HTMLInputElement>)

checkboxChangeHandler=（事件：React.ChangeEvent）

---

您可以看到一个工作示例。

通过在回调中使用第二个参数使其工作，它包含所有必需的信息

checkboxChangeHandler = (event: React.FormEvent<HTMLInputElement>, data: any) => {
    this.setState({ [data.name]: value });
};

checkboxChangeHandler=（事件：React.FormEvent，数据：any）=>{
this.setState（{[data.name]：value}）；
};

---

工作沙盒：

它仍然给出“未定义”！再次更新我的答案！现在应该可以工作了，看看我从你那里得到的沙箱示例。谢谢@Ben Smith！通过使用回调函数中的第二个参数，我终于让它工作了。我已经张贴了我的答案

const name = event.target.checked;

checkboxChangeHandler = (event: React.ChangeEvent<HTMLInputElement>)

checkboxChangeHandler = (event: React.FormEvent<HTMLInputElement>, data: any) => {
    this.setState({ [data.name]: value });
};