React+antd动态表单：基于字段值控制输入框禁用状态

问题出在你用单个状态变量控制所有价格输入框的禁用状态，导致所有字段同步变化。正确的做法是让每一组表单字段单独维护自身的价格框禁用状态，把禁用状态存在表单数组的每一项数据中。

步骤1：调整表单初始数据结构 #

给每一项表单数据添加priceDisabled字段，初始值设为true，表示价格框默认禁用：

const [form] = Form.useForm();

// 初始表单数据
const initialValues = {
  fields: [
    { sight: '', price: '', priceDisabled: true },
  ],
};

步骤2：处理sight选择的 onChange 事件 #

在sight的选择框 onChange 时，找到当前对应的表单项，将其priceDisabled设为false，仅启用当前项的价格框：

const handleSightChange = (index, value) => {
  form.setFieldsValue({
    [`fields[${index}].sight`]: value,
    [`fields[${index}].priceDisabled`]: false,
  });
};

步骤3：绑定价格输入框的 disabled 属性 #

将价格输入框的disabled属性绑定到对应表单项的priceDisabled字段：

<Form.Item
  name={[`fields`, index, `price`]}
  rules={[{ required: true, message: '请输入价格' }]}
>
  <InputNumber
    style={{ width: '100%' }}
    disabled={form.getFieldValue([`fields`, index, `priceDisabled`])}
    placeholder="价格"
  />
</Form.Item>

步骤4：处理新增字段逻辑 #

新增字段时，保证新添加的项默认priceDisabled为true：

const addField = () => {
  const fields = form.getFieldValue('fields');
  form.setFieldsValue({
    fields: [...fields, { sight: '', price: '', priceDisabled: true }],
  });
};

这样修改后，每一组sight和价格字段都是独立控制的，选择某个sight后只会启用对应的价格输入框，不会影响其他字段。

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