react如何改变输入框时间

2026-01-26 01:27:40React

改变输入框时间的方法

在React中处理输入框时间通常涉及使用<input type="time">元素，并通过状态管理来控制其值。以下是几种常见场景的实现方式：

使用受控组件

通过React的useState管理时间值，绑定onChange事件动态更新：

import React, { useState } from 'react';

function TimeInput() {
  const [time, setTime] = useState('12:00');

  const handleChange = (e) => {
    setTime(e.target.value);
  };

  return (
    <input 
      type="time" 
      value={time} 
      onChange={handleChange} 
    />
  );
}

设置默认时间

通过defaultValue属性初始化时间（非受控组件）：

<input type="time" defaultValue="08:30" />

动态修改时间值

通过ref或状态管理在特定条件下更新时间：

function DynamicTimeInput() {
  const [time, setTime] = useState('');

  const updateTime = () => {
    setTime('15:45');
  };

  return (
    <div>
      <input type="time" value={time} readOnly />
      <button onClick={updateTime}>Set Time</button>
    </div>
  );
}

格式化时间显示

使用第三方库如date-fns处理时间格式转换：

import { format, parse } from 'date-fns';

function FormattedTimeInput() {
  const [time, setTime] = useState('');

  const handleChange = (e) => {
    const parsed = parse(e.target.value, 'HH:mm', new Date());
    setTime(format(parsed, 'h:mm a')); // 转换为12小时制
  };

  return <input type="time" onChange={handleChange} />;
}

验证时间范围

添加时间范围限制（如仅允许选择未来时间）：

function RestrictedTimeInput() {
  const [time, setTime] = useState('');

  const handleChange = (e) => {
    const now = new Date();
    const selected = new Date(`1970-01-01T${e.target.value}`);
    if (selected > now) setTime(e.target.value);
  };

  return <input type="time" value={time} onChange={handleChange} />;
}