### 如何在 React Hooks 和 Ant Design 的 Form.List 组件中实现关联字段的动态控制非必填逻辑 在 React 和 Ant Design 中，通过使用 `Form.Item` 的 `rules` 属性以及动态调整表单字段的校验规则，可以实现关联字段的动态控制非必填逻辑。以下是一个完整的解决方案： #### 1. 动态调整校验规则 Ant Design 提供了 `setFieldsValue` 和 `setFields` 方法，可以用来动态更新表单字段的值或状态。结合 `Form.useWatch` 钩子（4.20 版本后支持），可以监听其他字段的变化并实时调整关联字段的校验规则。 ```javascript import React from 'react'; import { Form, Input, Button, Space } from 'antd'; const App = () => { const [form] = Form.useForm(); // 动态设置关联字段的校验规则 const updateValidationRules = (name, isRequired) => { form.setFields([ { name, rules: isRequired ? [{ required: true, message: 'This field is required!' }] : [{ required: false }], }, ]); }; return ( <Form form={form} layout="vertical"> <Form.Item label="Main Field" name="mainField"> <Input placeholder="Enter value" /> </Form.Item> {/* 关联字段 */} <Form.Item label="Associated Field" name="associatedField" shouldUpdate={(prevValues, currentValues) => prevValues.mainField !== currentValues.mainField } > {({ getFieldValue }) => { const isRequired = !!getFieldValue('mainField'); updateValidationRules('associatedField', isRequired); return ( <Input placeholder={ isRequired ? 'This field is required' : 'Optional field' } /> ); }} </Form.Item> <Space> <Button type="primary" htmlType="submit"> Submit </Button> </Space> </Form> ); }; export default App; ``` #### 2. 使用 `Form.List` 实现动态增删表单项 当需要处理多个关联字段时，可以结合 `Form.List` 组件。以下是基于 `Form.List` 的示例代码： ```javascript import React from 'react'; import { Form, Input, Button, Space } from 'antd'; const App = () => { const [form] = Form.useForm(); const updateValidationRules = (index, isRequired) => { form.setFields([ { name: [`list[${index}]`, 'associatedField'], rules: isRequired ? [{ required: true, message: 'This field is required!' }] : [{ required: false }], }, ]); }; return ( <Form form={form} layout="vertical"> <Form.List name="list"> {(fields, { add, remove }) => ( <> {fields.map(({ key, name, fieldKey }, index) => ( <Space key={key} style={{ display: 'flex', marginBottom: 8 }} align="baseline"> <Form.Item name={[name, 'mainField']} fieldKey={[fieldKey, 'mainField']} label={`Main Field ${index + 1}`} > <Input placeholder="Enter value" /> </Form.Item> <Form.Item name={[name, 'associatedField']} fieldKey={[fieldKey, 'associatedField']} label={`Associated Field ${index + 1}`} shouldUpdate={(prevValues, currentValues) => prevValues.list[index]?.mainField !== currentValues.list[index]?.mainField } > {() => { const mainFieldValue = form.getFieldValue( ['list', index, 'mainField'] ); const isRequired = !!mainFieldValue; updateValidationRules(index, isRequired); return ( <Input placeholder={ isRequired ? 'This field is required' : 'Optional field' } /> ); }} </Form.Item> <Button type="link" onClick={() => remove(name)}> Delete </Button> </Space> ))} <Form.Item> <Button type="dashed" onClick={() => add()} block> Add Field </Button> </Form.Item> </> )} </Form.List> <Space> <Button type="primary" htmlType="submit"> Submit </Button> </Space> </Form> ); }; export default App; ``` 上述代码中，通过 `shouldUpdate` 属性确保在主字段变化时重新渲染关联字段，并调用 `updateValidationRules` 更新校验规则[^3]。 #### 3. 注意事项 - 确保 Ant Design 的版本不低于 4.20，以便使用 `Form.useWatch` 钩子[^2]。 - 在复杂场景下，如需遍历所有表单字段获取值，可以使用 `form.getFieldsValue()`[^3]。 - 如果存在动态增删表单项的需求，需正确维护字段名称和索引关系，避免因字段名冲突导致的问题[^4]。 ---