antd Form.List中的一个Form.Item如何获取其他Form.Item的值
时间: 2024-03-12 07:47:08 浏览: 59
在 antd Form.List 中,一个 Form.Item 可以通过使用 getFieldDecorator 方法来获取自身的值,而获取其他 Form.Item 的值则需要通过 Form.List 的方法进行。例如,可以通过调用 form.getFieldValue 方法来获取其他 Form.Item 的值。具体实现步骤如下:
1. 在 Form.List 中,给每个 Form.Item 一个唯一的 name 属性,例如 name={`items[${index}].name`},其中 index 为当前 Form.Item 的索引。
2. 在 getFieldDecorator 方法中,使用 getFieldValue 方法来获取其他 Form.Item 的值。示例代码如下:
```jsx
{getFieldDecorator(`items[${index}].name`, {
initialValue: item.name,
rules: [{ required: true, message: 'Please input name' }],
})(
<Input placeholder="Enter name" />
)}
{getFieldDecorator(`items[${index}].age`, {
initialValue: item.age,
rules: [{ required: true, message: 'Please input age' }],
})(
<InputNumber placeholder="Enter age" min={0} />
)}
{getFieldDecorator(`items[${index}].email`, {
initialValue: item.email,
rules: [{ required: true, message: 'Please input email' }],
})(
<Input placeholder="Enter email" />
)}
```
3. 在需要获取其他 Form.Item 值的地方,调用 form.getFieldValue 方法。示例代码如下:
```jsx
const handleSubmit = e => {
e.preventDefault();
form.validateFields((err, values) => {
if (!err) {
// 获取其他 Form.Item 值
const names = form.getFieldValue('items').map(item => item.name);
console.log(names);
// 提交表单
console.log('Received values of form: ', values);
}
});
};
```