antd 中获取/设置Form组件的表单的值

最新推荐文章于 2024-06-14 10:14:02 发布

C_guoqing

最新推荐文章于 2024-06-14 10:14:02 发布

阅读量3.8k

点赞数 6

分类专栏： react 文章标签：前端 react.js javascript

本文链接：https://blog.csdn.net/C_guoqing/article/details/126163460

版权

react 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

在react编码过程中，使用antd组件，如何获取/设置Form组件中表单的数据

1. 类式组件

import React, { Component } from 'react'
import { Form, Input } from 'antd';
export default class test extends Component {

    formRef = React.createRef();
    render() {
        const submit = () => {
            // 获取表单中的数据
            const formData = this.formRef.current.getFieldsValue()
        }
        const backfill = () => {
            // 回填表单中的数据
            this.formRef.current.setFieldsValue({
                username: '张三',
                password: '123456'
            });
        }
        return (
            <div>
                <Form ref={this.formRef} autoComplete="off"  >
                    <Form.Item label="Username" name="username"
                        <Input />
                    </Form.Item>

                    <Form.Item label="Password" name="password"  >
                        <Input.Password />
                    </Form.Item>
                    <Form.Item >
                        <Button type="primary" onClick={submit}>
                            获取
                        </Button>
                    </Form.Item>
                    <Form.Item >
                        <Button type="primary" onClick={backfill}>
                            回填
                        </Button>
                    </Form.Item>
                </Form>
            </div>
        )
    }
}

2. 函数式组件

import React, { Component } from 'react'
import { Form, Input } from 'antd';

import React from 'react'

export default function test() {
    const [form] = Form.useForm();
    const submit = () => {
        // 获取表单中的数据
        const formData = form.getFieldValue()
    }
    const backfill = () => {
        // 回填表单中的数据
        form.setFieldsValue({
            username: '张三',
            password: '123456'
        });
    }
    return (
        <div>
            <Form form={form} autoComplete="off"  >
                <Form.Item label="Username" name="username" >
                    <Input />
                </Form.Item>
                <Form.Item label="Password" name="password" >
                    <Input.Password />
                </Form.Item>
                <Form.Item >
                    <Button type="primary" onClick={submit}>
                        获取
                    </Button>
                </Form.Item>
                <Form.Item >
                    <Button type="primary" onClick={backfill}>
                        回填
                    </Button>
                </Form.Item>
            </Form>
        </div>
    )
}