Ant Design Mobile Form 表单数据不联动问题

问题

Form表单没有联动useState中的数据。

代码

<Form layout='vertical'>
    <Form.Item label='金额'>
        <Input placeholder='请输入金额' clearable
               type={"number"}
               value={amount === null ? '' : amount.toString()}
               onChange={(v) => {
                   if (v.trim() === '') {
                       setAmount(null);
                       return;
                   }
                   const numValue = Number(v);
                   if (!isNaN(numValue)) {
                       setAmount(numValue);
                   } else {
                       Toast.show("请输入正确的数字");
                   }
               }}/>
    </Form.Item>
    <Form.Item
        label='日期'
        trigger='onConfirm'
        onClick={(e, datePickerRef: RefObject<DatePickerRef>) => {
            datePickerRef.current?.open()
        }}
    >
        <DatePicker defaultValue={new Date()}>
            {value => value ? formatDate(value) : '请选择日期'}
        </DatePicker>
    </Form.Item>
</Form>

原因

没有设置Form表单的name属性。

解决

Form.Item中添加name属性即可。

<Form layout='vertical'>
    <Form.Item name="money" label='金额'>
        <Input placeholder='请输入金额' clearable
               type={"number"}
               value={amount === null ? '' : amount.toString()}
               onChange={(v) => {
                   if (v.trim() === '') {
                       setAmount(null);
                       return;
                   }
                   const numValue = Number(v);
                   if (!isNaN(numValue)) {
                       setAmount(numValue);
                   } else {
                       Toast.show("请输入正确的数字");
                   }
               }}/>
    </Form.Item>
    <Form.Item
        name='date'
        label='日期'
        trigger='onConfirm'
        onClick={(e, datePickerRef: RefObject<DatePickerRef>) => {
            datePickerRef.current?.open()
        }}
    >
        <DatePicker defaultValue={new Date()}>
            {value => value ? formatDate(value) : '请选择日期'}
        </DatePicker>
    </Form.Item>
</Form>