Antd form.setFieldValue异常：仅获取数字部分的问题求助

你的代码中，Form.Item指定了name="serialNumber"，而内部的InputNumber作为表单组件，会自动将自身的值同步到Form对应的serialNumber字段。这就导致：每次InputNumber变化时，先触发handleNumberChange更新number状态，接着useEffect执行并设置拼接后的${serial}${number}到serialNumber，但随后InputNumber的自动同步逻辑又会把serialNumber覆盖为number的值，最终表单字段只保留数字部分。

有两种可行的修改方式：

方式一：解除Form.Item与serialNumber的直接绑定 #

去掉Form.Item的name属性，完全通过状态和useEffect控制serialNumber字段的赋值：

const IDCard = ({ sourcePage, defaultData, form }: any) => {
  const [serial, setSerial] = useState('');
  const [number, setNumber] = useState('');

  const handleSerialChange = (value: string) => {
    setSerial(value);
  };

  const handleNumberChange = (value: string | number | null) => {
    setNumber(value?.toString() || '');
  };

  useEffect(() => {
    const combinedValue = `${serial}${number}`;
    form?.setFieldValue('serialNumber', combinedValue);
  }, [serial, number, form]);

  return (
      <div className={styles.form_grid_container}>
        {/* 移除Form.Item的name属性 */}
        <Form.Item label="Seriya nömrəsi">
          <div
            style={{
              display: 'flex',
              alignItems: 'center',
              width: '300px',
              height: '52px',
              border: '1px solid #DEE3ED ',
              borderRadius: '5px',
              paddingLeft: '8px',
              boxSizing: 'border-box',
            }}
          >
            <Select
              style={{
                width: 98,
                height: 40,
                gap: '10px',
                background: '#F5F7FA',
                borderRadius: '5px',
              }}
              onChange={handleSerialChange}
              placeholder="Seriya"
              value={serial}
            >
              <Option value="AZE">AZE</Option>
              <Option value="AA">AA</Option>
            </Select>
            <InputNumber
              value={number}
              onChange={handleNumberChange}
              placeholder="Nömrə"
              style={{
                flex: 1,
                width: '147px',
                height: '24px',
                border: 'none',
                alignItems: 'center',
                display: 'flex',
                outline: 'none',
                boxShadow: 'none',
              }}
              type="number"
            />
          </div>
        </Form.Item>
      </div>
  );
};

方式二：拆分字段，提交时拼接 #

把serial和number设为独立的Form字段，在表单提交阶段再拼接成serialNumber：

const IDCard = ({ sourcePage, defaultData, form }: any) => {
  const handleSubmit = () => {
    const serial = form.getFieldValue('serial');
    const number = form.getFieldValue('number');
    const serialNumber = `${serial}${number}`;
    // 可将组合值设置到表单字段，或直接用于提交逻辑
    form.setFieldValue('serialNumber', serialNumber);
    // 执行后续提交操作
  };

  return (
      <div className={styles.form_grid_container}>
        <Form.Item label="Seriya nömrəsi">
          <div
            style={{
              display: 'flex',
              alignItems: 'center',
              width: '300px',
              height: '52px',
              border: '1px solid #DEE3ED ',
              borderRadius: '5px',
              paddingLeft: '8px',
              boxSizing: 'border-box',
            }}
          >
            <Form.Item name="serial" noStyle>
              <Select
                style={{
                  width: 98,
                  height: 40,
                  gap: '10px',
                  background: '#F5F7FA',
                  borderRadius: '5px',
                }}
                placeholder="Seriya"
              >
                <Option value="AZE">AZE</Option>
                <Option value="AA">AA</Option>
              </Select>
            </Form.Item>
            <Form.Item name="number" noStyle>
              <InputNumber
                placeholder="Nömrə"
                style={{
                  flex: 1,
                  width: '147px',
                  height: '24px',
                  border: 'none',
                  alignItems: 'center',
                  display: 'flex',
                  outline: 'none',
                  boxShadow: 'none',
                }}
                type="number"
              />
            </Form.Item>
          </div>
        </Form.Item>
        <Button onClick={handleSubmit}>提交</Button>
      </div>
  );
};

• 方式一适合需要实时同步serialNumber字段的场景，通过本地状态完全控制组合值，避免Form组件自动同步的覆盖问题。
• 方式二更贴合Ant Design Form的设计逻辑，拆分独立字段管理，仅在需要时组合，减少状态同步冲突。

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