React中最全获取表单数据：原生DOM、refs、 event.target.value、ant-design的Form组件

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

June.1

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

阅读量1.7w

点赞数 2

CC 4.0 BY-SA版权

分类专栏： React 文章标签： react获取表单

本文链接：https://blog.youkuaiyun.com/qq_39043923/article/details/89671265

React 专栏收录该内容

7 篇文章

订阅专栏

本文介绍了在React中获取表单数据的四种方法，包括原生DOM操作、使用Refs、监听事件target.value以及利用ant-design的Form组件。每种方法都有其适用场景和注意事项。

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

一、原生DOM表单

handleSubmit = () => {
  var username = document.getElementById('getName').value;
}
render() {
    return (
        <div>
            <input type="text" id="getName" placeholder="用户名" />
            <button onClick={this.handleSubmit}> 获取用户名</button>   
            //参数传递需要1.  this.handleSubmit.bind(this,params)      
            //  2.()=>this.handleSubmit(params)  
        </div>
    ) 
}

二、 refs

使用refs需要注意的地方：

Refs是访问组件内部DOM节点唯一看可靠的方法
Refs会自动销毁对组件的引用
不要在render或者render之前对Refs进行调用
不要滥用Refs(会影响性能)
ref可以设置字符串，也可以设置回调函数（推荐）。

handleSubmit = () => {
  var username = this.refs.submit.value;
}
render() {
    return (
        <div>
            <input ref="submit" type="text" placeholder="用户名" />
            <button onClick={this.handleSubmit}> 获取用户名</button>                       
        </div>
    ) 
}

三、 event.target.value

handleSubmit = (event) => {
  var username = event.target.value;
}
render() {
    return (
        <div>
            <input type="text" onclick={this.handleSubmit} placeholder="用户名" />               
        </div>
    ) 
}

四、ant-design（Form组件）

ant-design的Form组件文档

ant-design框架自带获取表单数据的用法 this.props.form.getFieldsValue()

import {Card, Form, Input,message} from 'antd'
class FormLogin extends React.Component {
    handleSubmit = () => {
        //获取表单数据
        let userInfo = this.props.form.getFieldsValue()
    }

    render() {
        const {getFieldDecorator} = this.props.form  //使用数据绑定方法
        return (
            <div>
                 <Form layout="vertical">
                      <FormItem>
                          {
                              getFieldDecorator('userName', {
                                  initialValue: '',//初始化数据
                                  rules: [//验证规则
                                      {
                                          required: true,
                                          message: '用户名不能为空'
                                      }
                                  ]
                              })(
                                  <Input prefix={ <Icon type="user"></Icon> } placeholder="请输入用户名"/>
                              )
                          }
                      </FormItem>
                      <FormItem>
							<Button type="primary" onClick={this.handleSubmit}>登陆</Button>
					  <FormItem>
                 </Form>
            </div>
        )
    }
}

export default Form.create()(FormLogin);