Antd TimePicker-RangePicker 的值在设置初始值后无法更改/检测

Question

我已经从 antd 和 RangePicker 实现了 TimePicker，如下所示：

import { TimePicker } from 'antd';
const { RangePicker } = TimePicker;

我以用户更改时间值的形式实现它：

const [editForm] = Form.useForm();
const formValues = Form.useWatch([], editForm);  

如果存在 timePeriod 值，我有一个函数可以填充时间选择器（范围选择器）的初始值

<Button 
     type="link" 
     size="medium" 
     icon={<EditOutlined />} 
     onClick={() => handleEdit(record.name,  record.time)}
/>

const handleEdit = (name, timePeriod) => {
    // some other codes
    editForm.setFieldsValue({
      name: name || "",
      timePeriod: timePeriod ? [moment(timePeriod[0], "HH:mm"), moment(timePeriod[1], "HH:mm")] : []
    });

  };

我的表单在模态框内扭曲，如下所示：

<Modal>
   <Form 
      form ={editForm} 
      onFinish={handleEditSubmit}        
   >
       <Form.Item 
          label="Name" 
          name="name" 
          rules={[{ required: true }]} 
         >            
            <Input 
              style={{width:"70%"}}
            />
        </Form.Item>
        <Form.Item
          label="Time Period"
          name="timePeriod"
          rules={[{ required: true }]}
         >
          <RangePicker format="HH:mm" style={{ width: "70%" }} />
        </Form.Item>
        <Form.Item>
          <Button type="primary" htmlType="submit">Save</Button>
        </Form.Item>
    </Form>
</Modal>

如果范围选择器有初始值，则这些值会正确显示在范围选择器框中。

但是，每当我尝试更改该值时，在“起始”时间值第一次更改时：

1.点击“确定”按钮后无法注册变更

2.随机值我找不到

的模式

当尝试更改“到”时间值时，它会以某种方式注册（我怀疑）我选择的“从”时间值，或者只是比我要更改的时间早（小）的任何随机时间值。

不过，当我清除范围选择器中的值时，我可以选择时间，并且它们会正确显示/注册。

()

对于任何不够简洁的内容，我深表歉意，如果需要，我很乐意提供更多详细信息。 谢谢！

Answer 1

您能提供更完整的代码吗？我猜你有表格组件，当单击编辑按钮时，显示模式......