Antd动态表单中如何根据数字输入框值控制文本输入框禁用状态

核心实现思路 #

这个场景属于典型的表单字段级联动，不需要额外维护自定义状态做值同步，完全可以依托Antd Form原生能力实现，既避免状态不同步的问题，也能减少不必要的组件重渲染。这套实现逻辑完全适配动态表单的循环渲染场景，只要按照动态表单的规范给每个字段配置独立的name路径（比如动态行场景下的['formList', rowIndex, 'numberField']），监听时传入对应路径即可正常工作，不需要额外适配动态逻辑。

两种官方推荐实现方式 #

方式一：Form.useWatch 局部字段监听（推荐） #

这是Antd 4.20+版本之后官方主推的字段联动方案，监听粒度细，性能表现最优：

• 初始化表单实例后，在组件顶层单独绑定对目标数字输入字段的监听，不需要监听全表单的所有值
• 将监听得到的字段值传入关联文本输入框的disabled属性做判断，实现状态联动
  核心示例代码：

// 拿到表单实例
const [form] = Form.useForm();
// 动态表单场景下，把目标字段的完整name路径传入即可，比如动态行的路径：['formList', rowIndex, 'numberInput']
const watchedNumberValue = Form.useWatch('numberInput', form);
// 文本输入框的禁用逻辑直接绑定监听值判断
<Form.Item name="numberInput" label="数字输入">
  <InputNumber />
</Form.Item>
<Form.Item name="textInput" label="关联文本输入">
  <Input disabled={watchedNumberValue === 1} placeholder="请输入文本" />
</Form.Item>

方式二：shouldUpdate 条件渲染（适配旧版Antd） #

如果项目使用的Antd版本低于4.20，不支持useWatch能力，可以通过shouldUpdate做局部条件渲染实现联动：

• 给不采集值的Form.Item绑定shouldUpdate规则，仅当目标数字字段值变化时才重新执行内部渲染逻辑
• 在渲染函数中通过getFieldValue拿到当前数字字段值，动态设置文本框的禁用状态
  核心示例代码：

<Form.Item name="numberInput" label="数字输入">
  <InputNumber />
</Form.Item>
// 仅监听numberInput字段的变化触发内部渲染
<Form.Item
  noStyle
  shouldUpdate={(prev, curr) => prev.numberInput !== curr.numberInput}
>
  {({ getFieldValue }) => {
    const currentNumber = getFieldValue('numberInput');
    return (
      <Form.Item name="textInput" label="关联文本输入">
        <Input disabled={currentNumber === 1} placeholder="请输入文本" />
      </Form.Item>
    )
  }}
</Form.Item>

常见踩坑说明 #

以下是导致联动失效的高频原因：

• 不要用自定义useState存储数字输入框的值再做判断，这种写法在表单重置、动态行增删、值通过API回填的场景下，很容易出现本地状态和表单实际值不同步的问题
• 不要给整个Form绑定全局onValuesChange去更新本地状态，会导致表单任意字段变动都触发全组件重渲染，表单复杂度较高时会出现明显性能问题
• 注意值类型匹配：数字输入框InputNumber的返回值为number类型，做判断时避免和字符串类型的'1'做严格相等校验，否则会导致判断失效

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