Comprendre les formes et les événements dans la réaction

Ce didacticiel explique les événements React, les composants contrôlés et la gestion des événements, démontrant comment créer un formulaire contrôlé et émettre des données d'un enfant à un composant parent. Créons un formulaire de profil utilisateur à l'aide de React.

Tout d'abord, créez une nouvelle application React. Le composant UserProfile, situé dans src/UserProfile.js, rend un formulaire pour les détails du profil utilisateur. L'importe dans votre composant racine (src/App.js):

import UserProfile from './UserProfile';

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

export default App;

Style la forme en utilisant 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;
}

Le formulaire rendu sera initialement non lié à l'état d'application. Pour connecter l'entrée de formulaire à l'état, nous utiliserons les gestionnaires d'événements.

réagir les événements

Les événements de réaction sont des actions déclenchées par les interactions utilisateur ou les événements système (clics, pressions de touches, charges de page, etc.). Pour gérer les modifications d'entrée, nous utiliserons l'événement onChange. Modifiez l'entrée name dans UserProfile.js:

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

De même, mettez à jour les entrées email, age et password en utilisant leurs variables d'état respectives et useState crochets.

Pour enregistrer l'état, ajoutez une fonction à UserProfile.js:

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

Mettez à jour le bouton Soumettre pour appeler logState:

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

Cliquez sur "Soumettre" enregistre les données du formulaire à la console. Cela démontre la liaison des données bidirectionnelle: les modifications de la vue mettent à jour l'état et les modifications de l'état mettent à jour la vue.

émettant des événements

Pour envoyer des données de l'enfant (UserProfile) au parent (App), nous émettons un événement. Ajoutez une fonction emit à UserProfile.js:

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

Mettez à jour le bouton Soumettre pour appeler emit:

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

Maintenant, dans App.js, ajoutez une fonction de rappel et passez-la comme un accessoire à UserProfile:

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

Maintenant, la soumission du formulaire mettra à jour le composant parent, affichant les données soumises.

Cela complète le tutoriel. Vous avez appris à créer des composants contrôlés, à gérer les événements et à émettre des événements dans React. N'oubliez pas de remplacer les chemins d'image d'image d'espace réservé par des chemins d'image réels.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!