如何在更改时将useState常量设置为输入值
如何在更改时将useState常量设置为输入值
提问于 2020-12-11 20:26:35
假设我在函数组件中创建了一个变量，如下所示：
const [quizName, setQuizName] = useState("");如何根据用户在输入中输入的内容更改此值。我的想法是这样的：
<input
value={quizName}
onChange={setQuizName(value)}
></input>但是它不知道值是什么，我如何才能将该值放入我的quizName变量中？
回答 3
Stack Overflow用户
发布于 2020-12-11 20:30:42
<input
value={quizName}
onChange={(e)=>setQuizName(e.target.value)}>
</input>Stack Overflow用户
发布于 2020-12-11 20:40:56
最简单的方法是在input的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} />
)以下是react文档中对useCallback的描述：
Stack Overflow用户
发布于 2020-12-11 20:30:20
onChange={setQuizName(value)}当你像这样调用这个函数时，它将被执行，而不需要等待你去改变它。
onChange={(e) => setQuizName(e.target.value)}才是正确的做法
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/65251360
复制相关文章
相似问题
腾讯云开发者
