Übergeben Sie Daten von der untergeordneten Komponente an die übergeordnete Komponente in React

React ist aus mehreren Gründen die beliebteste Front-End-Bibliothek. Die Wiederverwendbarkeit von Komponenten ist einer der größten Vorteile von React.

Die Bibliothek ermöglicht es Ihnen, Ihre Webanwendung in sehr kleine Codebits zu zerlegen, jedes mit seiner Funktionalität und seinem Design. Dann können Sie diese kleineren Komponenten verwenden, um größere Komponenten zu erstellen, und so weiter.

React-Anwendungen sind im Wesentlichen ein Komponentenbaum mit einer übergeordneten Komponente an der Spitze. Da die Wiederverwendbarkeit von Komponenten so wichtig ist, muss es eine Möglichkeit geben, Daten zwischen React-Komponenten auszutauschen.

Übergeben Sie Daten von der untergeordneten Komponente an die übergeordnete Komponente in React

In React ist es gut, eine Single Source of Truth zu haben – normalerweise die Komponente an der Spitze des Baums. React-Entwickler können props-Objekte verwenden, um Daten manuell von den Eltern an ihre Kinder weiterzugeben.

Untergeordnete Komponenten können auf den an sie weitergegebenen Wert zugreifen und ihn an ihre untergeordneten Elemente weitergeben. Auf diese Weise können die Daten von der übergeordneten Komponente mehrere Ebenen nach unten im Komponentenbaum weitergegeben werden.

Manchmal enthalten untergeordnete Komponenten Eingabeelemente wie Textfelder, Kontrollkästchen, Radios und Dropdowns. Wenn Sie die Werte von Eingabeelementen speichern möchten, müssen Sie diese Werte von den untergeordneten Komponenten an die übergeordneten Elemente übertragen.

Übergeordnete Komponenten können props verwenden, um Callback-Funktionen an ihre Kinder weiterzugeben. Mit anderen Worten, Sie können eine Funktion (normalerweise eine Ereignisbehandlungsroutine) in der übergeordneten Komponente definieren und sie als Callback-Funktion weitergeben.

Im Wesentlichen können Sie die Callback-Funktion verwenden, um das Ereignis in der untergeordneten Komponente zu behandeln und den Wert aus dem Eingabeelement als Argument an die als prop übergebene Callback-Funktion zu übergeben. Die Funktion wird ausgeführt und aktualisiert den Status in der übergeordneten Komponente.

Schauen wir uns dieses Beispiel an.

import "./styles.css";
import { useState } from "react";
export default function App() {
  const [name, setName] = useState("");
  console.log(name);
  const handleChange = (e) => setName(e.target.value);
  return (
    <div className="App">
      <Input handler={handleChange}></Input>
    </div>
  );
}
function Input(props) {
  return (
    <div className="App">
      <p>Enter the name</p>
      <input type="text" onChange={(e) => props.handler(e)}></input>
    </div>
  );
}

Die Live-Demo zeigt, dass der Callback in der untergeordneten Komponente aufgerufen wird, aber in der übergeordneten Komponente ausgeführt wird und seinen Status aktualisiert.

Es ist ein einfaches Beispiel, bei dem wir den Hook useState() aufrufen, um die Zustandsvariable name mit einer leeren Zeichenfolge zu initialisieren. Wir erstellen auch die Funktion setName, um sie zu aktualisieren.

Unsere Funktion handlechange nimmt ein Argument, ein synthetisches Ereignis, und übergibt den aktuellen Wert an die Zustandsvariable name im Textfeld. Der Ereignishandler wird nicht in der übergeordneten Komponente aufgerufen.

Es wird dort definiert, aber als handler-Prop an das untergeordnete Input-Element weitergegeben und dort aufgerufen.

Wir rufen die Funktion console.log() in der übergeordneten Komponente auf, um die Zustandsvariable abzumelden. In der Konsole sehen Sie, dass der Wert der Zustandsvariablen aktualisiert wird.