React中useState结合date类型input的两类问题求解

1. 给date输入框设置当前默认日期 #

HTML的type="date"输入框对value格式有严格要求，必须是**YYYY-MM-DD格式的字符串**——你当前直接传入Date对象，这是输入框无法识别的，所以默认值不生效。

正确的初始化方式是把当前日期转为符合要求的字符串：

// 把当前日期转成YYYY-MM-DD格式
const getTodayString = () => new Date().toISOString().split('T')[0];

用这个逻辑初始化状态，就能让输入框默认显示当天日期。

2. 实现日期的查看与修改 #

用户选择新日期时，onChange事件返回的e.target.value已经是YYYY-MM-DD格式的字符串，直接存入状态即可。输入框会自动根据状态值显示选中的日期，完美实现查看和修改的联动。

修正后的完整代码 #

import { useState } from 'react';

const DateInputComponent = () => {
  // 初始化状态为当天的YYYY-MM-DD字符串
  const [fromDate, setFromDate] = useState(() => new Date().toISOString().split('T')[0]);

  return (
    <input
      className={`form__input ${!fromDate && 'form__input--incomplete'}`}
      id="fromDate"
      name="fromDate"
      type="date"
      autoComplete="off"
      value={fromDate}
      onChange={(e) => setFromDate(e.target.value)}
    />
  );
};

export default DateInputComponent;

额外说明 #

• 用useState的函数初始化形式（useState(() => {...})）可以避免组件每次渲染都创建新的Date对象，小幅度提升性能。
• 如果需要把状态里的日期字符串转回Date对象做后续处理，直接用new Date(fromDate)即可。
• 部分浏览器支持手动清空日期输入框，此时e.target.value会变成空字符串，你的!fromDate判断会自动触发form__input--incomplete类，逻辑是通顺的。

内容的提问来源于stack exchange，提问作者24sharon