如何设置useState const为更改时输入的值

Question

假设我在功能组件中创建了一个变量，如下所示：

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

如何根据用户输入的内容更改此值。我的想法是：

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

但是它不知道什么是值，我怎么能得到值到我的quizName变量？

Answer 1

onChange={setQuizName(value)}

当您像这样调用函数时，它将在不等待您更改的情况下执行。

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

才是正确的做法

Answer 2

最简单的方法是在输入更改时使用一个函数，如：

<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} />
)

以下是react文档中的useCallback说明：

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

Answer 3

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