在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>
    )
}


Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐