语义更改处理程序-ui-react 复选框不起作用：React+Typescript

Question

我有两个语义-ui-反应复选框。当我尝试附加更改处理程序时，我在控制台 log 时得到 'undefined' 的值。

想要获取两个复选框的值。

Link 到沙箱：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;

（请注意，我已将 "name" 设为 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 复选框不起作用：React+Typescript

Change handler for semantic-ui-react checkbox does not work : React+Typescript

javascript

events

typescript

reactjs

semantic-ui-react