Comment gérer React setState() lorsqu'il s'agit de champs de saisie?

Question

J'ai 3 zones de texte. J'ai un menu déroulant. Lorsque l'application démarre/la page se charge, les zones de texte sont vides et la liste déroulante est remplie de produits divers.

Lorsque je sélectionne un élément dans la liste déroulante, je charge l'objet dans les champs de texte pour l'éditer. Lorsque vous utilisez des propriétés (this.props), les données sont correctement chargées dans les zones de texte, mais je ne peux pas apporter de modifications au texte, car cela doit être fait à l'aide de l'état à la place. Mais si j'utilise state (this.state), le composant ne reste jamais synchronisé. Si je sélectionne l'élément 1 dans la liste déroulante, il est chargé dans l'état mais ne s'affiche pas sur l'écran tant que je n'ai pas choisi un autre élément dans la liste déroulante. Par conséquent, lorsque je sélectionne l'article 2, il charge l'article 1 dans les zones de texte.

Citation des documents React.

« setState() n'a pas muter immédiatement this.state mais crée une transition d'état en attente »

Comment diable voulez-vous les gars faire face à cela? J'ai l'impression d'avoir tout essayé.

Answer 1

Vous devez conserver l'état dans le composant parent. Le parent serait parent pour toutes ces zones de texte et pour le menu déroulant. De là, vous avez juste besoin de passer des fonctions de rappel comme accessoires aux zones de texte et au composant déroulant. Dans cette fonction de rappel, vous devez donner l'élément de menu déroulant sélectionné en tant que paramètre. Et lorsque la fonction est appelée, vous devez mettre à jour le contenu des zones de texte. Je pense que vous pouvez le faire en gardant l'état pour les trois zones de texte, quel texte est actuellement affiché. Initialement leur état serait indéfini, alors ils montreraient vide. Dans l'état, vous pouvez suivre l'index et la valeur. Après cela, vous devez également passer des fonctions de rappel aux zones de texte. Ces fonctions de rappel suivent et mettent à jour le contenu des éléments du menu déroulant lorsque vous modifiez les champs. Lorsque vous modifiez, vous appelez le rappel, qui devrait mettre à jour l'état, et restituez également le menu déroulant avec le nouveau contenu.