React中如何正确获取date输入框当前值并设置第二个日期框最小可选日期

核心问题 #

• 取值方式错误：date类型输入框的选中值统一存储在event.target.value中，你使用event.target.depart、event.target.return无法正确获取输入值，是导致逻辑失效的核心原因
• 全局变量无法触发重渲染：你将返程日期的最小限制minReturn定义为全局变量，修改全局变量不会触发React组件重新渲染，输入框的min属性无法同步更新
• 拼写错误：状态字段returning在handleChange中被误写为returing，会导致状态更新失败
• 格式不匹配：date输入框的min属性要求接收yyyy-MM-dd格式的字符串，你在setMinDate中直接给minReturn赋值Date对象，格式不兼容
• 逻辑冗余：单独定义的pickDepart、pickReturn和已有的handleChange功能重复，没有必要分开维护
• React语法错误：原生HTML的for、class属性在React中要分别替换为htmlFor、className，否则会触发语法警告

修复方案 #

1. 调整状态定义与事件处理逻辑 #

constructor(props) {
  super(props);
  this.state = {
    selectedFrom: '4',
    depart: getToday(0),
    returning: getToday(21),
    minReturn: getToday(0) // 把最小返程日期放到state里，修改后可触发重渲染
  };

  this.handleChange = this.handleChange.bind(this);
  this.handleSubmit = this.handleSubmit.bind(this);
}

handleChange(event) {
  const { id, value } = event.target;
  // 通用处理所有输入框的变更
  this.setState(prevState => {
    const newState = { [id]: value };
    // 如果修改的是出发日期，同步更新返程的最小日期
    if (id === 'depart') {
      const d1 = new Date(value);
      const d2 = new Date(today);
      newState.minReturn = d1.getTime() >= d2.getTime() ? value : today;
      // 可选优化：如果当前选中的返程日期小于新的最小返程日期，自动更新返程日期
      if (new Date(prevState.returning) < new Date(newState.minReturn)) {
        newState.returning = newState.minReturn;
      }
    }
    return newState;
  });
}

handleSubmit(event) {
  event.preventDefault();
}

// 不需要单独的pickDepart、pickReturn方法，统一用handleChange即可

2. 调整渲染部分代码 #

<div className='flex-children'>
  <span className='flex-line'>
    <label htmlFor='depart'><i className="far fa-calendar-alt"></i> Depart: </label>
    <input type='date' id='depart' value={this.state.depart} min={today} onChange={this.handleChange} />
  </span>
  <span className='flex-line'>
  <label htmlFor='return'> Return: </label>
  <input type='date' id='return' value={this.state.returning} min={this.state.minReturn} onChange={this.handleChange} />
  </span>
</div>

3. 保留的公共工具函数（无需修改） #

function addDays(date, days) {
  var result = new Date(date);
  result.setDate(result.getDate() + days);
  return result;
}
  
function getToday(days){
  var today = new Date();
  var today_us = addDays(today, days)
  var dd = String(today_us.getDate()).padStart(2, '0');
  var mm = String(today_us.getMonth() + 1).padStart(2, '0'); //January is 0!
  var yyyy = today_us.getFullYear();
  return yyyy + '-' + mm + '-' + dd;
};

const today = getToday(0);

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