在
React项目
中，可以
使用antd的
Form.useWatch来关联
Form.list内的表单组件。具体步骤如下：
1. 首先，需要在组件
中引入use
Form和useWatch函数：
```javascript
import {
Form, Input, Button, Space } from '
antd';
import { use
Form, useWatch } from '
antd/lib/
form/
Form';
```
2. 然后，在组件
中定义表单的初始值和表单项的配置：
```javascript
const initialValues = {
list: [{ name: 'Alice', age: 18 }, { name: 'Bob', age: 20 }],
};
const layout = {
labelCol: { span: 6 },
wrapperCol: { span: 18 },
};
```
3. 接下来，在组件
中使用Form.use
Form来创建一个表单实例，并将初始值和表单项的配置传入：
```javascript
const [
form] = use
Form({
initialValues,
...layout,
});
```
4. 然后，在组件
中使用Form.list来渲染表单项，并将表单实例和表单项的配置传入：
```javascript
<
Form.List name="list">
{(fields, { add, remove }) => {
//
使用useWatch监听表单项的变化
useWatch({
form,
name: ['list'],
onChange: () => {
console.log('
form changed:',
form.getFieldValue('list'));
},
});
return (
<div>
{fields.map((field) => (
<Space key={field.key} align="baseline">
<
Form.
Item
{...field}
name={[field.name, 'name']}
fieldKey={[field.fieldKey, 'name']}
rules={[{ required: true, message: 'Missing name' }]}
>
<Input placeholder="Name" />
</
Form.
Item>
<
Form.
Item
{...field}
name={[field.name, 'age']}
fieldKey={[field.fieldKey, 'age']}
rules={[{ required: true, message: 'Missing age' }]}
>
<Input placeholder="Age" />
</
Form.
Item>
<Button onClick={() => remove(field.name)}>Remove</Button>
</Space>
))}
<Button onClick={() => add()}>Add</Button>
</div>
);
}}
</
Form.List>
```
5. 最后，可以在表单项的onChange回调函数
中监听表单项的变化，以便在表单项值发生变化时执行相关操作。
总之，
使用antd的
Form.useWatch来关联
Form.list内的表单组件，可以方便地监听表单项的变化并执行相关操作。
738
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
