背景：总结后台系统中常用的表单功能，温故知新。 ### 1.联动控制 form.item 的显示隐藏根据 select 的选中值控制输入框的显示隐藏： ```js ``` ### 2.联动控制 Form.list 中的 form.item 交互，包括但不限于 disabled ，显示隐藏。更多后台业务场景中，form 表单中会用到 Form.List 组件，本例子中，Form.List 组件包含三个子元素，前两个是下拉框，第三个根据第一个下拉框选中值动态显示为 input 或 select 组件。当第一个下拉框选中值为 1 时， - 第二个下拉框默认选中 2 ，并且不能选择其他选项。 - 第三个下拉框根据显示 select 并且隐藏 input 。 ```js // 通过 onchange 方法获取当前选中值，动态控制其他 form.item 的状态 const changeValue = (key, value, index) => { const current = form.getFieldValue('myList')[index] if (current['key'] === 1) { current[key] = 2 return } current[key] = value } // 表单联动效果关键是在 Form.List 最外层的 Form.Item 设置 shouldUpdate ，在需要实时更新的表单项 from.item 上也设置 shouldUpdate 即可。 // form.getFieldValue('myList')[index]?.key 方法可以获取 Form.List 中每一个数组元素的值。前提是你已经在在

元素中添加 form 对象。 {() => ( {(fields, { add, remove }) => ( <> {fields.map((field, index) => { const myListLength = fields.length const currentFormItem = form?.getFieldValue('myList')[index] return ( {form.getFieldValue('myList')[index]?.key !== 1 ? ( ) : ( )}