怎么获取antd3中form的所有input中输入的值
时间: 2023-08-11 20:07:06 浏览: 192
要获取 Ant Design 3 中表单(Form)中所有输入框(Input)的值,可以使用以下步骤:
1. 首先,确保你已经引入了 Ant Design 3 的相关依赖,包括 `antd` 的主要库和 `Form` 组件。例如:
```javascript
import { Form, Input, Button } from 'antd';
```
2. 在你的组件中,使用 `Form.create()` 方法创建一个高阶组件,并将其包装在 `Form` 组件中。例如:
```javascript
const WrappedForm = Form.create()(YourComponent);
```
3. 在 `YourComponent` 组件中,使用 `getFieldDecorator` 方法为每个输入框添加装饰器,以便处理表单的校验和数据绑定。例如:
```javascript
const { getFieldDecorator } = this.props.form;
// ...
<Form>
<Form.Item>
{getFieldDecorator('input1', {
rules: [{ required: true, message: 'Please input value 1!' }],
})(<Input placeholder="Value 1" />)}
</Form.Item>
<Form.Item>
{getFieldDecorator('input2', {
rules: [{ required: true, message: 'Please input value 2!' }],
})(<Input placeholder="Value 2" />)}
</Form.Item>
{/* ... */}
</Form>
```
4. 当需要获取所有输入框的值时,可以使用 `getFieldsValue` 方法。例如:
```javascript
handleSubmit = (e) => {
e.preventDefault();
this.props.form.validateFields((err, values) => {
if (!err) {
console.log('All input values:', values);
}
});
}
// ...
<Button type="primary" onClick={this.handleSubmit}>Submit</Button>
```
在上述代码中,`getFieldsValue` 方法将返回一个对象,其中键名是输入框的名称(即 `getFieldDecorator` 中的第一个参数),键值是对应输入框的值。
这是获取 Ant Design 3 中表单所有输入框值的一种方法。请根据你的具体情况进行调整和使用。
阅读全文