So setzen Sie useState const auf den Wert der Eingabe bei Änderung

Question

Angenommen, ich habe eine Variable in einer Funktionskomponente wie folgt erstellt:

const [quizName, setQuizName] = useState("");

Wie kann ich diesen Wert basierend darauf ändern, was ein Benutzer in eine Eingabe eingibt? Meine Idee war folgende:

<input
    value={quizName}
    onChange={setQuizName(value)}
></input>

Aber es weiß nicht, was Wert ist, wie kann ich den Wert in meine quizName-Variable bekommen?

Answer 1

<input
    value={quizName}
    onChange={(e)=>setQuizName(e.target.value)}>
</input>

Answer 2

Der einfachste Weg ist, eine Funktion in onChange der Eingabe zu haben, wie:

<input value={quizName} onChange={(e)=>setQuizName(e.target.value)} />

Es ist okay! Aber bitte um Gottes willen, bitte hör auf damit!

Hier ist der Grund:

Sie erstellen bei jeder Änderung der Eingabe eine Funktion und führen sie aus! Dies ist nicht in Ordnung von Performance-Schraubstock! vor allem, wenn Sie es in einer großen App überall in Ihren Komponenten tun!

Was Sie tun müssen, ist einfach useCallbackwie folgt zu verwenden :

const [quizName, setQuizName] = useState("");

const handleInputChange = useCallback((e) => {
   setQuizName(e.target.value)
}, [setQuizName])


return (
   <input value={quizName} onChange={handleInputChange} />
)

Hier ist eine Beschreibung der useCallbackReaktionsdokumentationen:

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

Answer 3

onChange={setQuizName(value)}

Wenn Sie die Funktion wie folgt aufrufen, wird sie ausgeführt, ohne dass Sie darauf warten müssen, sie zu ändern.

onChange={(e) => setQuizName(e.target.value)}

ist der richtige Weg, es zu tun