react之如何获得表单数据

最新推荐文章于 2025-06-10 11:54:05 发布

Monica_llf

最新推荐文章于 2025-06-10 11:54:05 发布

阅读量1.1k

点赞数

CC 4.0 BY-SA版权

分类专栏： react

本文链接：https://blog.youkuaiyun.com/Monica_llf/article/details/95951445

react 专栏收录该内容

2 篇文章

订阅专栏

本文探讨了在React中如何有效地获取和更新表单输入数据，以便在界面上实时显示。通过对组件状态管理和onChange事件的深入理解，实现数据的动态交互。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

import React ,{Component} from 'react'

export default class TodoList extends Component{
    constructor(){
        super()
        this.state={
            inputValue:'i am excellent',
            
        }
    }
    render(){
        return(

            
           <div>
               <div><input 
                  //把inputValue的值赋给input的html页面显示出来
                  value={this.state.inputValue} 
                  //需要注意2点,第一就是onChange调用函数不加(),第二就是把指向对象的this绑定给指向函数的this,这样此刻的this就是指向对象的了, 这样调用的handleInputChange就是这个对象的函数
                  onChange={this.handleInputChange.bind(this)}
                  /><button >提交</button></div>

               <ul>
                   <li>学英语</li>
                   <li>Learning React</li>
               </ul>

           </div>
        )
    }
      //e是捕捉到input改变的这个事件.可以用 console.log(e)看下内容
    handleInputChange(e){       
       
        this.setState({
            
            //target是获得input标签,value是获得input输入到页面上input的值,因为输入页面上的值,内存更新不到,所以用setState更新
            inputValue: e.target.value

        })


       
    }
}

代码这样做的结果是为了更新的数据可以输出到input页面上.