antd form.setFieldValue 未按预期工作

Question

我正在使用

form.setFieldValue

修改包含序列号和数字组合的表单字段值。但它只需要数字部分，即使我把它们放在一起并创建了一个像这样的字符串：

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(() => {
    form?.setFieldValue('serialNumber', `${serial}${number}`);
  }, [serial, number, form]);

  return (
      <div className={styles.form_grid_container}>
        <Form.Item label="Seriya nömrəsi" name={'serialNumber'}>
          <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"
            >
              <Option value="AZE">AZE</Option>
              <Option value="AA">AA</Option>
            </Select>
            <InputNumber
              defaultValue={defaultData?.serialNumber}
              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>
  );
};

我尝试过将

addOnBefore

道具与

inputnumber

一起使用，但它也不起作用。 Form.item 只将数字值作为serialNumber 字段值。

Answer 1

问题是我没有在父组件中绑定我的表单。我确实创建了一个像这样的实例

const [form] = Form.useForm()

但我忘了这样做

<Form form={form}>

。现在我知道有必要了