Comment définir useState const sur la valeur de l'entrée lors du changement
disons que j'ai créé une variable dans un composant fonctionnel comme ceci:
const [quizName, setQuizName] = useState("");
Comment pourrais-je changer cette valeur en fonction de ce qu'un utilisateur entre dans une entrée. Mon idée était la suivante:
<input
value={quizName}
onChange={setQuizName(value)}
></input>
Mais il ne sait pas quelle est la valeur, comment puis-je obtenir la valeur dans ma variable quizName?
Réponses
<input
value={quizName}
onChange={(e)=>setQuizName(e.target.value)}>
</input>
le moyen le plus simple est d'avoir une fonction dans onChange d'entrée comme:
<input value={quizName} onChange={(e)=>setQuizName(e.target.value)} />
C'est bon! Mais s'il vous plaît, pour le bien de DIEU, arrêtez de faire ça!
Voici la raison:
vous créez une fonction à chaque changement d'entrée et vous l'exécutez! ce n'est pas correct de l'étau de performance! surtout si vous le faites dans une application à grande échelle partout dans vos composants!
ce que vous devez faire est simplement d'utiliser useCallback
comme ci-dessous:
const [quizName, setQuizName] = useState("");
const handleInputChange = useCallback((e) => {
setQuizName(e.target.value)
}, [setQuizName])
return (
<input value={quizName} onChange={handleInputChange} />
)
voici une description des useCallback
documentations in react:
https://reactjs.org/docs/hooks-reference.html#usecallback
onChange={setQuizName(value)}
Lorsque vous appelez la fonction de cette manière, elle sera exécutée sans attendre que vous la changiez.
onChange={(e) => setQuizName(e.target.value)}
est la bonne façon de le faire