在TypeScript中使用Ant Design的
Form表单获取值的步骤如下：
1. **安装依赖**：
首先，确保你已经安装了`antd`和`@types/react`等必要的依赖。
```bash
npm install antd
npm install --save-dev @types/react
```
2. **创建
表单组件**：
使用Ant Design的`
Form`组件来创建一个
表单，并使用`use
Form`钩子来
获取表单实例。
```tsx
import React, { useState } from 'react';
import {
Form, Input, Button } from 'antd';
import {
FormInstance } from 'antd/lib/
form';
const My
Form: React.FC = () => {
const [
form] =
Form.use
Form();
const [
formValues, set
FormValues] = useState<any>({});
const handleSubmit = () => {
form.validateFields().then(values => {
set
FormValues(values);
}).catch(info => {
console.log('Validate Failed:', info);
});
};
return (
<div>
<
Form form={
form} name="my
Form">
<
Form.Item name="username" label="Username">
<Input />
</
Form.Item>
<
Form.Item name="password" label="Password">
<Input.Password />
</
Form.Item>
<
Form.Item>
<Button type="primary" onClick={handleSubmit}>
Submit
</Button>
</
Form.Item>
</
Form>
<div>
<h3>
Form Values:</h3>
<pre>{JSON.stringify(
formValues, null, 2)}</pre>
</div>
</div>
);
};
export default My
Form;
```
3. **
获取表单值**：
在上述代码中，`handleSubmit`函数会验证
表单并
获取表单值，然后将这些值设置到`
formValues`状态中并显示出来。
4. **使用
表单实例**：
通过`
Form.use
Form()`
获取表单实例，可以在需要的地方调用`
form.setFieldsValue`来设置
表单值，或者调用`
form.resetFields`来重置
表单。
```tsx
const handleReset = () => {
form.resetFields();
};
```
5. **完整示例**：
下面是一个完整的示例，展示了如何创建
表单、
获取值和重置
表单。
```tsx
import React, { useState } from 'react';
import {
Form, Input, Button } from 'antd';
import {
FormInstance } from 'antd/lib/
form';
const My
Form: React.FC = () => {
const [
form] =
Form.use
Form();
const [
formValues, set
FormValues] = useState<any>({});
const handleSubmit = () => {
form.validateFields().then(values => {
set
FormValues(values);
}).catch(info => {
console.log('Validate Failed:', info);
});
};
const handleReset = () => {
form.resetFields();
};
return (
<div>
<
Form form={
form} name="my
Form">
<
Form.Item name="username" label="Username">
<Input />
</
Form.Item>
<
Form.Item name="password" label="Password">
<Input.Password />
</
Form.Item>
<
Form.Item>
<Button type="primary" onClick={handleSubmit}>
Submit
</Button>
<Button onClick={handleReset} style={{ marginLeft: '10px' }}>
Reset
</Button>
</
Form.Item>
</
Form>
<div>
<h3>
Form Values:</h3>
<pre>{JSON.stringify(
formValues, null, 2)}</pre>
</div>
</div>
);
};
export default My
Form;
```
通过以上步骤，你可以在TypeScript中使用Ant Design的
Form表单来
获取和操作
表单值。
本文介绍了三种获取Web表单数据的方法：使用FormCollection、Request.Form及通过参数传递。前两种适用于POST提交，而第三种则支持GET和POST。文章重点讨论了不同提交方式下数据获取的有效性。
扫一扫
2743
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
