获取对 antd 时间选择器的引用并将其值存储到状态变量

Question

我需要获取用户在时间选择器中选择的值以存储在状态中。在 antd timepicker 文档中我无法引用参数。

代码：

const format = "HH:mm";

export default function MyTimePicker() {
  const [mytime, setTime] = useState("00:00");

  const handleChange = (e) => {
    setTime(e.targe.value);
    console.log(mytime);
  };

  return (
    <TimePicker
      defaultValue={moment("12:08", format)}
      format={format}
      onChange={handleChange}
    />
  );
}

显示

无法读取未定义的属性“值”

文档只有 onSelect 和 onChange 但是如何获取选定的值？

Answer 1

仅当用户单击“确定”按钮时才需要更新状态时使用onOk。否则使用onChange 或onSelect

  const [timeString, setTimeString] = useState('');

  return (
    <TimePicker
      onOk={(time) => {
        setTimeString(timeString);
        console.log(time);
        console.log(timeString);
      }}
    />
  );

在文档中 https://ant.design/components/time-picker/ 看起来像 onOk 没有显示，但您可以在此处找到 onOk 描述 https://ant.design/components/date-picker/#RangePicker

当你使用onChange 时，你应该使用带有参数的handle 函数：(time, timeString)