antd 中 获取/设置Form组件的表单的值
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>
)
}
更多推荐
已为社区贡献1条内容
所有评论(0)