首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >从反应中控制

从反应中控制
EN

Stack Overflow用户
提问于 2022-09-04 21:30:12
回答 1查看 40关注 0票数 1

我在react中是新手,我有点困惑于React如何在每个新输入的击键上运行更新,对于exapmpe来说,这是表单,我想在每次击键时更新状态

代码语言:javascript
代码运行次数:0
运行
复制
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},我不确定在本例中为值分配了什么状态)希望能够理解这一点

谢谢

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2022-09-04 21:55:19

onChange事件处理程序是一个可以传递给<input>元素的工具。并实时收听用户的输入。

每当您在输入中键入某些内容时,function将触发传递给onChange的函数,该函数调用作为其参数传递的函数。在你的情况下,你要打电话给handleChange。传递给handleChange函数的事件对象包含有关输入事件的所有细节。

在您的例子中,----当您在输入反应中输入'a‘时,将触发handleChange --该函数从data =“value={data} ==> value="" to data="a" value={data} ==> value="a"”更新状态

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/73602938

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档