Cara mengatur useState const ke nilai input pada perubahan
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
<input
value={quizName}
onChange={(e)=>setQuizName(e.target.value)}>
</input>
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 useCallback
seperti 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 useCallback
dokumentasi in react:
https://reactjs.org/docs/hooks-reference.html#usecallback
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