antd-mobile form表单怎么获取值
时间: 2023-08-22 10:59:15 浏览: 233
获取提交的表单元素的值
您可以使用 Antd Mobile 中的 Form 组件来获取表单的值。具体步骤如下:
1. 首先,将需要获取值的表单项包裹在 `Form` 组件中,并为每个表单项设置一个 `name` 属性,以便后续获取对应的值。
```jsx
import { Form, Input } from 'antd-mobile';
<Form>
<Form.Item name="username">
<Input type="text" placeholder="请输入用户名" />
</Form.Item>
</Form>
```
2. 在需要获取表单值的地方,通过 `Form` 组件的 `getFieldValue` 方法来获取具体表单项的值。例如:
```jsx
import { Form } from 'antd-mobile';
const MyComponent = () => {
const [form] = Form.useForm();
const handleFormSubmit = () => {
const values = form.getFieldsValue();
console.log(values.username); // 获取用户名表单项的值
};
return (
<Form form={form}>
<Form.Item name="username">
<Input type="text" placeholder="请输入用户名" />
</Form.Item>
<button onClick={handleFormSubmit}>提交</button>
</Form>
);
}
```
通过以上步骤,您可以在点击提交按钮时获取到表单项的值,并进行相应的处理。请注意,上述代码使用了 Antd Mobile 的 Hooks API `useForm` 来创建和管理表单实例。
阅读全文