Cara mengatur useState const ke nilai input pada perubahan

Dec 11 2020

katakanlah saya membuat variabel dalam komponen fungsional seperti:

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

Bagaimana saya bisa mengubah nilai ini berdasarkan apa yang dimasukkan pengguna ke dalam input. Ide saya adalah ini:

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

Tetapi tidak tahu apa nilainya, bagaimana saya bisa memasukkan nilai ke dalam variabel quizName saya?

Jawaban

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

cara termudah adalah memiliki fungsi di onChange input seperti:

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

Tidak apa-apa !, Tapi Tolong demi Tuhan tolong berhenti melakukan ini!

Inilah alasannya:

Anda membuat fungsi pada setiap perubahan input dan menjalankannya! ini tidak baik untuk catok kinerja! terutama jika Anda melakukannya dalam aplikasi skala besar di mana-mana di komponen Anda!

yang perlu Anda lakukan hanyalah menggunakan useCallbackseperti di bawah ini:

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

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


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

Berikut adalah deskripsi useCallbackdokumentasi in react:

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

SinanYaman Dec 11 2020 at 19:30
onChange={setQuizName(value)}

Ketika Anda memanggil fungsi seperti ini, itu akan dijalankan tanpa menunggu Anda untuk mengubahnya.

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

adalah cara yang benar untuk melakukannya