Arbeiten mit Events in React

Der Großteil des Verhaltens in einer Anwendung dreht sich um Ereignisse. Gibt der Benutzer einen Wert in das Registrierungsformular ein? Ereignis. Drückt der Benutzer auf den Senden-Button? Ein weiteres Ereignis. Ereignisse werden auf verschiedene Weise ausgelöst und wir erstellen Anwendungen, die darauf lauschen, um als Reaktion darauf etwas anderes zu tun.

Vielleicht sind Sie bereits sehr vertraut mit der Arbeit mit Ereignissen aus Ihrer bestehenden JavaScript-Erfahrung. React hat jedoch eine eigene Art, diese zu handhaben. Anstatt DOM-Ereignisse direkt anzusprechen, wickelt React sie in eine eigene Ereignis-Wrapper-Klasse ein. Aber das werden wir noch genauer betrachten.

Lassen Sie uns durchgehen, wie man Ereignisse in React erstellt, hinzufügt und auf sie lauscht.

Ereignisse erstellen

Wir beginnen mit der Erstellung eines Formulars, das ein Eingabefeld und einen Button hat. Ein Ereignis wird ausgelöst, wenn ein Wert eingegeben wird. Der Button wird verwendet, um eine Funktion aufzurufen, die diesen Wert umkehrt.

So wird es funktionieren

• Ein leeres Eingabefeld ermöglicht es dem Benutzer, Text einzugeben.
• Ein `onChange`-Ereignis wird ausgelöst, wenn Werte in das Eingabefeld eingegeben werden. Dies ruft eine Funktion – `handleChange()` – auf, die verwendet wird, um einen neuen Zustand für das Eingabefeld festzulegen.
• Wenn der Button "Text umkehren" geklickt wird, wird ein weiteres Ereignis ausgelöst. Dies ruft eine Funktion – `handleReverse()` – auf, um einen neuen Zustand für `reversedText` festzulegen.

Hier ist das in Code übersetzt

class App extends React.Component {
  state = {
    /*  Initial State */
    input: "",
    reversedText: ""
  };

  /* handleChange() function to set a new state for input */
  handleChange = event => {
    const value = event.target.value;
    this.setState({
      input: value
    });
  };

  /* handleReverse() function to reverse the input and set that as new state for reversedText */
  handleReverse = event => {
    event.preventDefault();
    const text = this.state.input;
    this.setState({
      reversedText: text
        .split("")
        .reverse()
        .join("")
    });
  };

  render() {
    return (
      <React.Fragment>
        { /* handleReverse() is called when the form is submitted */ }
        <form onSubmit={this.handleReverse}>
          <div>
            { /* Render input entered */}
            <label>Text: {this.state.input}</label>
          </div>
          <div>
           { /* handleChange() is triggered when text is entered */ }
            <input
              type="text"
              value={this.state.input}
              onChange={this.handleChange}
              placeholder="Enter a text"
            />
          </div>
          <div>
            <button>Reverse Text</button>
          </div>
        </form>
        { /* Render reversed text */}
        <p>Reversed Text: {this.state.reversedText}</p>
      </React.Fragment>
    );
  }
}}

Siehe den Pen React Event Pen – Formular von Kingsley Silas Chijioke (@kinsomicrote) auf CodePen.

Auf Komponenteneignisse lauschen

Nehmen wir an, Sie haben eine Komponente wie diese;

class IncrementButton extends React.Component{
  render() {
    return (
      <React.Fragment>
        <button>+</button>
      </React.Fragment>
    )
  }
}

Wird die Einbeziehung in Ihre App-Komponente wie hier funktionieren?

class App extends React.Component{
  state = {
    count: 0
  }

  handleIncrement = (event) => {
    this.setState({ count: this.state.count + 1})
  }

  render() {
    return(
      <React.Fragment>
        <h1>{this.state.count}</h1>
        <IncrementButton onClick={this.handleIncrement} />
      </React.Fragment>
    )
  }
}

Nein, das wird sie nicht, da Sie nur auf Ereignisse von DOM-Elementen lauschen können. Wir haben dies zu Beginn des Beitrags erwähnt, aber React-Komponenten sind Wrapper für DOM-Elemente. Das bedeutet, dass wir im Grunde eine Schicht haben, die wir durchlaufen müssen, um auf das Ereignis zu lauschen.

Der Weg dorthin besteht darin, den Event-Handler als Prop an die Kind-Komponente weiterzugeben. Dann wird die Prop als Attribut wie folgt an das Click-Ereignis weitergegeben.

class IncrementButton extends React.Component{
  render() {
    return (
      <React.Fragment>
        <button onClick={this.props.increaseButton}>+</button>
      </React.Fragment>
    )
  }
}

class App extends React.Component{
  state = {
    count: 0
  }

  handleIncrement = (event) => {
    this.setState({ count: this.state.count + 1})
  }

  render() {
    return(
      <React.Fragment>
        <h1>{this.state.count}</h1>
        <IncrementButton increaseButton={this.handleIncrement} />
      </React.Fragment>
    )
  }
}

Siehe den Pen React Event Pen – Komponenteneignisse von Kingsley Silas Chijioke (@kinsomicrote) auf CodePen.

Sie könnten stattdessen eine stateless functional component verwenden

const IncrementButton = (props) => {
  return (
    <React.Fragment>
      <button onClick={props.increaseButton}>+</button>
    </React.Fragment>
  )
}

Event-Listener hinzufügen

Es kann vorkommen, dass Sie bestimmte DOM-Ereignisse nutzen möchten, die beim Mounten der Komponente ausgelöst werden. Lassen Sie uns dies anhand des `resize`-Ereignisses untersuchen – wir möchten die Breite des Fensters sehen, wann immer es verkleinert oder vergrößert wird.

class App extends React.Component{
  state = {
    windowWith: window.innerWidth
  }

  handleResize = (event) => {
    this.setState({ windowWith: window.innerWidth })
  }

  render() {
    return(
      <React.Fragment>
        <h1>Window Width</h1>
        <h1>{this.state.windowWith}</h1>
      </React.Fragment>
    )
  }
}

Wenn wir eine Komponente erstellen und sie wie unten gezeigt ausprobieren, wird das Ereignis nicht ausgelöst. Wir müssen den Event-Listener (`handleResize()` in diesem Fall) und den Ereignistyp hinzufügen, wie wir es hier getan haben.

class App extends React.Component{
  state = {
    windowWith: window.innerWidth
  }

  handleResize = (event) => {
    this.setState({ windowWith: window.innerWidth })
  }
  
  componentDidMount() {
    window.addEventListener('resize', this.handleResize)
  }

  componentDidUnmount() {
    window.removeEventListener('resize', this.handleResize)
  }

  render() {
    return(
      <React.Fragment>
        <h1>Window Width</h1>
        <h1>{this.state.windowWith}</h1>
      </React.Fragment>
    )
  }
}

Siehe den Pen React Event Pen – addEventListener von Kingsley Silas Chijioke (@kinsomicrote) auf CodePen.

Nun wird der Event-Listener beim Mounten der Komponente hinzugefügt. Das bedeutet, dass unsere Komponente aktiv auf das Browserfenster lauscht und seine Breite anzeigt, wenn sie sich aktualisiert.

Zusammenfassung

Okay, wir haben also in sehr kurzer Zeit viel gelernt. Wir haben erfahren, dass React keine direkte Verbindung zu einem DOM-Ereignis herstellt, sondern zu Synthetic Events, die Wrapper für DOM-Ereignisse sind. Wir haben uns mit dem Prozess des Erstellens von Event-Listenern befasst, damit diese an Synthetic Events angehängt werden und von dort aus sichergestellt, dass eine Komponente aktualisiert wird, wenn diese Ereignisse ausgelöst werden.

Zusätzliche Ressourcen

• Umgang mit Ereignissen – React-Dokumentation
• SyntheticEvent – React-Dokumentation, einschließlich aller Ereignistypen
• 5 wesentliche React-Konzepte, die Sie kennen müssen, bevor Sie Redux lernen – Chris Nwamba bietet einen guten Überblick über die Ereignisbehandlung in React im zweiten Teil dieser Serie