Изменение обработчика для флажка semantic-ui-реакции не работает: React + Typescript

Question

У меня есть два флажка semantic-ui-реакции. Когда я пытаюсь присоединить обработчики изменений, я получаю значение «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;

to:

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

и

const name = event.target.checked;

(Обратите внимание, что я сделал const для name, поскольку вам не нужно переназначать его значение в функции, в которой вы находитесьиспользуя его)

Также обратите внимание, что вам нужно изменить сигнатуру вашего обработчика изменений с React.FormEvent на React.ChangeEvent, т.е.

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

Вы можете увидеть рабочий пример здесь.

Answer 2

Работает с помощью второго параметра в обратном вызове, он содержит всю необходимую информацию.

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

Рабочая песочница: https://codesandbox.io/s/31oq13p3o1