Jak ustawić useState const na wartość wejścia przy zmianie

Dec 11 2020

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

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

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ć useCallbackjak poniżej:

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

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


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

tutaj jest opis useCallbackw dokumentacjach reagowania:

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

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