Comment définir useState const sur la valeur de l'entrée lors du changement

Dec 11 2020

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

1 bakar_dev Dec 11 2020 at 19:30
<input
    value={quizName}
    onChange={(e)=>setQuizName(e.target.value)}>
</input>
1 a_m_dev Dec 11 2020 at 19:40

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 useCallbackcomme 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 useCallbackdocumentations in react:

https://reactjs.org/docs/hooks-reference.html#usecallback

SinanYaman Dec 11 2020 at 19:30
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