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