React中input触发onFocus时如何修改输入类型与max属性值

核心实现逻辑 #

直接通过React受控组件状态管理输入框属性即可，不需要额外引入第三方库：

• 初始将input的type设为text，配置placeholder为"Select start date"
• 绑定onFocus事件，聚焦时将type切换为date，同时生成符合日期输入框规范的当日字符串（格式必须为YYYY-MM-DD）赋值给max属性，禁止选择未来日期
• 可选补充onBlur逻辑：如果用户聚焦后未选择任何日期，失焦时把type切回text，保证占位符正常显示

可直接运行的代码示例（函数组件+Hooks） #

import { useState } from 'react';

function StartDatePicker() {
  const [inputType, setInputType] = useState('text');
  const [maxDate, setMaxDate] = useState('');
  const [value, setValue] = useState('');

  const handleFocus = () => {
    setInputType('date');
    // 基于本地时间生成当日日期，避免UTC时区导致的日期偏差
    const now = new Date();
    const formatNum = (num) => String(num).padStart(2, '0');
    const todayStr = `${now.getFullYear()}-${formatNum(now.getMonth() + 1)}-${formatNum(now.getDate())}`;
    setMaxDate(todayStr);
  };

  const handleBlur = () => {
    // 未选值时切回文本类型，显示占位符
    if (!value) setInputType('text');
  };

  return (
    <input
      type={inputType}
      placeholder="Select start date"
      max={maxDate}
      value={value}
      onChange={(e) => setValue(e.target.value)}
      onFocus={handleFocus}
      onBlur={handleBlur}
    />
  );
}

export default StartDatePicker;

注意事项 #

• 不要用new Date().toISOString().split('T')[0]生成当日日期：该方法基于UTC时区计算，在国内凌晨时段会返回前一天的日期，导致max属性限制错误
• 如果不需要失焦切回文本类型的逻辑，直接删除handleBlur相关代码即可，聚焦切换的核心逻辑不受影响
• 类组件实现逻辑完全一致，只需把状态和方法迁移到类组件的state和实例方法上即可

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