useStateconstを変更時の入力値に設定する方法

Question

次のような機能コンポーネントで変数を作成したとしましょう。

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

ユーザーが入力に入力した内容に基づいて、この値を変更するにはどうすればよいですか。私の考えはこれでした：

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

しかし、それは値が何であるかを知りません、どうすれば私のquizName変数に値を取得できますか？

Answer 1

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

Answer 2

最も簡単な方法は、次のような入力のonChangeに関数を含めることです。

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

大丈夫ですが、神のためにこれをやめてください！

理由は次のとおりです。

入力が変更されるたびに関数を作成して実行します。これはパフォーマンスバイスでは問題ありません！特に、コンポーネントのあらゆる場所で大規模なアプリでそれを行う場合は！

あなたがする必要があるのはuseCallback、以下のように使用することです：

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

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


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

これuseCallbackがinreactドキュメントの説明です：

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

Answer 3

onChange={setQuizName(value)}

このように関数を呼び出すと、変更を待たずに実行されます。

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

それを行う正しい方法です