从反应中控制
提问于 2022-09-04 13:30:12
我在react中是新手，我有点困惑于React如何在每个新输入的击键上运行更新，对于exapmpe来说，这是表单，我想在每次击键时更新状态
import React, {useState} from 'react';
let FormsPractice =()=>{
let [data, updateData] =useState('')
let handleChange =(event)=>{
let {value} = event.target;
updateData(value)
}
return(
<div className ="container">
<form >
<input
type="text"
placeholder="Enter name"
name="name"
value={data}
onChange={handleChange}
/>
</form>
</div>
)
}
export default FormsPractice我不明白的是更新周期，我的理解如下：
由于输入的值与反应状态相关联，因此输入的初始值显然是"“。
现在我要说的是：
当键盘存储发生=>时，让我们假设输入了一个"a“字符；
=>调用handleChange方法；
=> event.target.value，它是还原"a“(作为输入自身状态的值)还是返回空的，因为该值绑定到状态(value={data}，我不确定在本例中为值分配了什么状态)希望能够理解这一点
谢谢
回答 1
Stack Overflow用户
回答已采纳
发布于 2022-09-04 13:55:19
onChange事件处理程序是一个可以传递给<input>元素的工具。并实时收听用户的输入。
每当您在输入中键入某些内容时，function将触发传递给onChange的函数，该函数调用作为其参数传递的函数。在你的情况下，你要打电话给handleChange。传递给handleChange函数的事件对象包含有关输入事件的所有细节。
在您的例子中，----当您在输入反应中输入'a‘时，将触发handleChange --该函数从data =“和value={data} ==> value="" to data="a" value={data} ==> value="a"”更新状态
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/73602938
复制相关文章
腾讯云开发者
