javascript - Change-Handler für semantic-ui-react Checkbox funktioniert nicht: React+Typescript

Ich habe zwei semantic-ui-react Kontrollkästchen. Wenn ich versuche, Änderungs-Handler anzuhängen, erhalte ich beim Konsolen-Log den Wert 'undefined'.

Möchten Sie beide Kontrollkästchenwerte abrufen.

Link zur Sandbox: https://codesandbox.io/s/5vo8v4996k

Wo mache ich einen Fehler?

Hilfe wäre willkommen

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

Antwort #1

Die Art, wie Sie Ihr Ereignis verbunden haben, und die Art, wie Sie darauf zugreifen, ist falsch.

Um es zu beheben, ändern Sie:

onChange = {this.checkboxChangeHandler}

und

let name = event.target.name;

zu :

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

und

const name = event.target.checked;

(Beachte, dass ich „name“ als const deklariert habe, da du seinen Wert in der Funktion, in der du ihn verwendest, nicht neu zuweisen musst)

Beachten Sie auch, dass Sie die Signatur Ihres Änderungs-Handlers von React.FormEvent auf React.ChangeEvent ändern müssen, d.h.

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

Sie können hier ein funktionierendes Beispiel sehen.

Antwort #2

Es zum Laufen gebracht, indem ich den zweiten Parameter im Callback verwendet habe, er enthält alle erforderlichen Informationen.

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

Arbeits-Sandbox: https://codesandbox.io/s/31oq13p3o1