1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > antd 中 获取/设置Form组件的表单的值

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

时间:2022-05-11 18:16:10

相关推荐

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

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

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。