当前位置: 代码迷 >> 综合 >> Antd 4.4.3 版本,如何获取form表单的值
  详细解决方案

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

热度:79   发布时间:2023-11-22 05:52:12.0
//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;
  相关解决方案