0
votes

Comment réinitialiser un champ d'entrée sur la touche "Entrée" dans React?

Je crée une entrée qui ajoute à une liste des balises rendues sous l'entrée. J'aimerais que l'entrée appuie sur la balise dans la liste lorsque "Entrée" est poussée lorsque l'utilisateur est axé sur le champ de saisie. Le champ se réinitialise ensuite à vide ou à "", et l'utilisateur peut ajouter une autre balise de la même manière.

Le problème que j'ai d'avoir est qu'après la réinitialisation de la valeur d'une chaîne vierge, à tout moment, j'essaie de saisir la valeur de l'entrée Une chaîne vide est renvoyée.

Voici ce que j'ai jusqu'à présent: xxx

javascript reactjs jsx dom

1 commentaires

Je me sens comme s'il n'y a aucune raison d'utiliser des API Dom ici. Pourquoi ne pas mettre l'auditeur à clé sur l'élément de réact et utiliser l'état des valeurs?

3 Réponses :

0
votes

en supposant que addoption code> est un code>, code> ne devrait pas avoir <code> réinitialiser () code> méthode. Modifier <code> .Value code> à la place <pre>useEffect(() => { const element = document.getElementById("addOption"); const listener = event => { if (event.key === "Enter") { newOption(); event.preventDefault(); } }; element.addEventListener("keyup", listener); return () => element.removeEventListener("keyup", listener); }, [listOfOptions]); </pre></code></code>

0 commentaires

2
votes

J'éviterais de manipuler directement le DOM en réagissant. Laissez le réact de Dom virtuel de réact que.

Vous pouvez stocker la valeur du formulaire dans l'état, puis sur Soumettre, il réinitialise l'état à ''. P>

quelque chose comme ceci: P>

const [value, setValue] = useState('');

const handleFormValueChange = (event) => setValue(event.target.value);

const resetFormValue = () => setValue('');

<input type="text" value={value} onChange={(event) => handleFormValueChange(event)} />
<input type="submit" onSubmit={resetFormValue} />

0 commentaires

1
votes

La réponse, en tenant compte des suggestions antérieures, merci pour l'aide, serait alors ci-dessous: xxx

cette solution utilise la touche Entrée pour soumettre et réinitialiser la valeur, tandis que la modification de la valeur seul réact de la DOM Virtuel.

0 commentaires