Verständnis von Formen und Ereignissen in React

Dieses Tutorial erklärt React -Ereignisse, kontrollierte Komponenten und Ereignisbehandlungen, in denen gezeigt wird, wie man eine kontrollierte Form erstellt und Daten von einem Kind an eine übergeordnete Komponente ausgibt. Erstellen wir ein Benutzerprofilformular mit React.

Erstellen Sie zunächst eine neue React -App. Die in UserProfile befindliche src/UserProfile.js -Komponente macht ein Formular für Benutzerprofildetails. Importieren Sie es in Ihre Stammkomponente (src/App.js):

import UserProfile from './UserProfile';

function App() {
  return (
    <div classname="App">
      <userprofile></userprofile>
    </div>
  );
}

export default App;

Style die Form mit src/App.css:

.App {
  text-align: left;
  margin-left: 20%;
  margin-right: 20%;
}

label {
  display: inline-block;
  margin-right: 1em;
  width: 4em;
}

input {
  width: 15em;
}

Das gerenderte Formular wird zunächst in den Anwendungszustand ungebunden sein. Um den Formulareingang an den Status zu verbinden, verwenden wir Ereignishandler.

reagieren Ereignisse

React -Ereignisse sind Aktionen, die durch Benutzerinteraktionen oder Systemereignisse ausgelöst werden (Klicks, Tastendrücken, Seitenladungen usw.). Um Eingangsänderungen zu verarbeiten, verwenden wir das onChange -Ereignis. Ändern Sie die name Eingabe in UserProfile.js:

<input id="name-field" type="text" value="{name}" onchange="{(e)"> setName(e.target.value)}
/>

Aktualisieren Sie in ähnlicher Weise die Eingaben email, age und password mit ihren jeweiligen Zustandsvariablen und useState -Haken.

Um den Status zu protokollieren, fügen Sie UserProfile.js:

eine Funktion hinzu

const logState = () => {
  console.log(name);
  console.log(email);
  console.log(age);
  console.log(password);
};

Aktualisieren Sie die Schaltfläche Senden, um logState:

anzurufen

<button onclick="{logState}">Submit</button>

Klicken Sie auf "Senden" der Formulardaten an der Konsole. Dies zeigt eine Zwei-Wege-Datenbindung: Änderungen in der Ansicht Aktualisieren Sie den Status und Statusänderungen Aktualisieren Sie die Ansicht.

Ereignisse emittieren

Um Daten aus dem Kind (UserProfile) an den Elternteil zu senden (App), werden wir ein Ereignis abgeben. Fügen Sie emit: UserProfile.js eine

-Funktion hinzu

const emit = () => {
  props.callback({ name, email, age, password });
};

Aktualisieren Sie die Schaltfläche Senden, um emit:

anzurufen

<button onclick="{emit}">Submit</button>

Fügen Sie jetzt in App.js eine Rückruffunktion hinzu und geben Sie sie als Prop an UserProfile:

weiter.

function App() {
  const [data, setData] = useState({});
  const importData = (data) => setData(data);

  return (
    <div classname="App">
      <userprofile callback="{importData}"></userprofile>
      <p>Name: {data.name || "No name To Display"}</p>
      <p>Email: {data.email || "No email To Display"}</p>
    </div>
  );
}

wird nun das Senden des Formulars die übergeordnete Komponente aktualisiert und die übermittelten Daten angezeigt.

Dies vervollständigt das Tutorial. Sie haben gelernt, wie man kontrollierte Komponenten erstellt, Ereignisse umgeht und Ereignisse in React emittiert. Denken Sie daran, Platzhalterbildpfade durch tatsächliche Bildwege zu ersetzen.

Das obige ist der detaillierte Inhalt vonVerständnis von Formen und Ereignissen in React. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!