Question

我有两个语义用户界面反应复选框。当我尝试附加变更处理程序时，在控制台log时得到的值为“ undefined”。

想获取两个复选框值。

链接到沙盒：https://codesandbox.io/s/5vo8v4996k

我要去哪里错了？

我们将不胜感激

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

Answer 1

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

要对其进行更改，请执行以下操作：

onChange = {this.checkboxChangeHandler}

和

let name = event.target.name;

收件人：

onChange = {e => this.checkboxChangeHandler(e)}

和

const name = event.target.checked;

（请注意，我已将“名称”设为const，因为您无需在使用它的函数中重新分配其值）

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

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

您可以看到一个有效的示例here。

Answer 2

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

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

工作沙箱：https://codesandbox.io/s/31oq13p3o1

语义UI反应复选框的更改处理程序不起作用：React + Typescript

2 个答案: