Antd动态表单如何根据当前值切换动态表单项？

你的问题核心是没有正确定位动态字段中的type值，导致切换单选时无法触发对应输入框的切换。以下是具体修复方案：

关键问题点 #

1. getFieldValue("type") 没有指定当前行的字段路径，Form.List中每个动态项的字段嵌套在menuTree[index]下，必须用[field.name, "type"]来获取当前行的类型值。
2. shouldUpdate的判断逻辑错误，原代码对比的是整个表单的type变化，应该针对当前行的type字段做对比。
3. 外层Form.Item末尾多余的<Input/>属于无效内容，需要删除。

修复后的完整代码 #

<Form.List name="menuTree">
  {(fields, { add, remove }) => (
    <>
      {fields.map((field, index) => (
        <Row id={"menu-row-" + index} key={field.key}>
          <Col span={8}>
            <Form.Item 
              label="Title" 
              name={[field.name, "title"]} 
              key={`title-${field.key}`}
            >
              <Input />
            </Form.Item>
          </Col>
          <Col span={4}>
            <Form.Item 
              label="Type" 
              name={[field.name, "type"]}
              key={`type-${field.key}`}
            >
              <Radio.Group>
                <Radio value="link">URL</Radio>
                <Radio value="page">Page</Radio>
              </Radio.Group>
            </Form.Item>
          </Col>
          <Col span={9}>
            <Form.Item
              noStyle
              shouldUpdate={(prevValues, currentValues) => 
                prevValues?.menuTree?.[index]?.type !== currentValues?.menuTree?.[index]?.type
              }
              key={`content-${field.key}`}
            >
              {({ getFieldValue }) => {
                const currentType = getFieldValue([field.name, "type"]);
                return currentType === "link" ? (
                  <Form.Item name={[field.name, "url"]} label="URL">
                    <Input />
                  </Form.Item>
                ) : (
                  <Form.Item name={[field.name, "page"]} label="Page">
                    <Input />
                  </Form.Item>
                );
              }}
            </Form.Item>
          </Col>
          <Col span={2}>
            <Form.Item>
              <Button htmlType="button" onClick={() => moveUp(index)}>
                <CaretUpOutlined />
              </Button>
              <Button htmlType="button" onClick={() => moveDown(index)}>
                <CaretDownOutlined />
              </Button>
            </Form.Item>
          </Col>
          <Col span={1}>
            <Button htmlType="button" onClick={() => remove(field.name)}>
              <MinusOutlined />
            </Button>
          </Col>
        </Row>
      ))}
      <Button type="dashed" onClick={() => add()} block icon={<PlusOutlined />}>
        Add menu item
      </Button>
    </>
  )}
</Form.List>

额外优化点 #

• 用field.key代替index作为元素key，避免重排序时的渲染异常
• 移除了原代码中随机数生成key的逻辑，改用field.key保证唯一性
• 修正了删除按钮的调用，直接使用Form.List提供的remove方法传入field.name更规范

内容的提问来源于stack exchange，提问作者Moha