React函数组件如何获取time类型输入框onChange的HH:mm格式值

HTML原生type="time"输入框的value属性默认返回24小时制HH:mm格式的时间字符串，你只需要在onChange回调中同步读取e.target.value即可获取对应值。你当前的代码仅打印了事件对象本身，没有读取target下的value属性，修改后的实现示例如下：

import { useState } from 'react';

function App() {
  // 绑定input的value状态
  const [timeValue, setTimeValue] = useState('');

  const handleTimeChange = (e) => {
    // 同步读取value，拿到的直接是HH:mm格式的时间
    const currentTime = e.target.value;
    console.log(currentTime); // 输出示例：09:45、22:10
    setTimeValue(currentTime);
  };

  return (
    <input
      type="time"
      onChange={handleTimeChange}
      className="app-time"
      min="00:00"
      max="23:59"
      value={timeValue}
    />
  );
}

注意事项 #

• React的合成事件采用池化复用机制，不要通过异步打印整个事件对象的方式读取value，事件回调执行完成后合成事件的属性会被重置回收，会导致取不到值的问题，必须在回调内同步读取需要的属性。
• 如果需要获取带秒的时间，可以给input添加step={1}属性，此时返回的value格式为HH:mm:ss。

内容的提问来源于stack exchange，提问作者Tick Twitch