Jak ustawić useState const na wartość wejścia przy zmianie
powiedzmy, że utworzyłem zmienną w komponencie funkcjonalnym, takim jak ten:
const [quizName, setQuizName] = useState("");
Jak mogę zmienić tę wartość na podstawie tego, co użytkownik wprowadza do danych wejściowych. Mój pomysł był taki:
<input
value={quizName}
onChange={setQuizName(value)}
></input>
Ale nie wie, jaka jest wartość, jak mogę pobrać wartość do mojej zmiennej quizName?
Odpowiedzi
<input
value={quizName}
onChange={(e)=>setQuizName(e.target.value)}>
</input>
najprościej jest mieć funkcję w onChange wejścia, taką jak:
<input value={quizName} onChange={(e)=>setQuizName(e.target.value)} />
W porządku !, Ale proszę, na litość boską, przestańcie to robić!
Oto powód:
tworzysz funkcję przy każdej zmianie wejścia i uruchamiasz ją! to nie jest w porządku w przypadku imadła wydajnościowego! zwłaszcza jeśli robisz to w aplikacji na dużą skalę, gdziekolwiek w Twoich komponentach!
co musisz zrobić, to po prostu użyć useCallback
jak poniżej:
const [quizName, setQuizName] = useState("");
const handleInputChange = useCallback((e) => {
setQuizName(e.target.value)
}, [setQuizName])
return (
<input value={quizName} onChange={handleInputChange} />
)
tutaj jest opis useCallback
w dokumentacjach reagowania:
https://reactjs.org/docs/hooks-reference.html#usecallback
onChange={setQuizName(value)}
Gdy wywołasz funkcję w ten sposób, zostanie ona wykonana bez czekania na jej zmianę.
onChange={(e) => setQuizName(e.target.value)}
to właściwy sposób, aby to zrobić