Antd 4.4.3 版本，如何获取form表单的值

big tail

于 2020-07-26 19:29:38 发布

阅读量3.7k

点赞数

CC 4.0 BY-SA版权

分类专栏： form react antd 文章标签： react

本文链接：https://blog.csdn.net/qq_37698249/article/details/107598140

react 同时被 3 个专栏收录

12 篇文章

订阅专栏

form

2 篇文章

订阅专栏

antd

1 篇文章

订阅专栏

本文介绍如何使用Ant Design的Form组件创建交互式表单，包括使用useForm钩子、设置表单项、获取表单值及处理表单提交的方法。通过具体示例，展示如何在React应用中有效管理和验证用户输入。

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

//1.const [form] = useForm()  必不可少!!!
//2.必须要给组件传递一个props !!!
//3.给Form组件，添加form={form}  !!!
//4.获取表单的值， form.getFieldValue 获取对应字段的值
//5.提交表单 onFinish
/*
	<Form.Item name='myInput' > <Input placeholder='请输入' />  </Form.Item>  
	注：如果要获取到Input的值，必须用Form.Item 包裹 并且给Form.Item 添加name属性，后面获取Input值的时候，就是通过name来获取
*/

import React from 'react';
import { Form, Row, Col, Button, Input } from 'antd';
import styles from './index.less';

const Test1 = (props) => {
    const [form] = Form.useForm()   ******

    const onFinish = (values) => {   ******
        console.log(values);
    }
    const otherBtnClick = () => {
        console.log(form.getFieldValue('bbb'));
    }
  return (
    <div className={styles.test1}>
      <Form onFinish={onFinish} form={form}>	******
        <Row>
          <Col md={8} sm={24}>
            <Form.Item label="联系电话" name='bbb'>  	******
              <Input placeholder='请输入' />
            </Form.Item>
          </Col>
          <Col md={8} sm={24}>
            <Form.Item label=" ">  
              <Button type='primary' htmlType='submit'>点我</Button>
            </Form.Item>
          </Col>
        </Row>
      </Form>
      <Button type='primary' onClick={otherBtnClick}>点我获取form</Button>
    </div>
  );
};

export default Test1;