如何在React中为日期范围选择实现对应输入框的切换

嘿，我之前做过类似的日期范围选择器，核心就是要跟踪当前激活的输入框，这样日历选完日期就知道该往哪个输入框填了。下面给你一步步拆解实现：

我们需要在组件状态里存三个关键值：

• fromDate：起始日期（moment对象）
• toDate：结束日期（moment对象）
• activeInput：标记当前要填充的输入框（值为'from'或'to'）

流程逻辑：

1. 点击「From」输入框 → 把activeInput设为'from'
2. 点击「To」输入框 → 把activeInput设为'to'
3. 在日历上选择日期 → 根据activeInput的值，更新对应的fromDate或toDate
4. 输入框实时渲染对应状态的日期值

假设你已经安装了moment和react-calendar-pane依赖，完整组件代码如下：

import React, { Component } from 'react';
import moment from 'moment';
import Calendar from 'react-calendar-pane';

class DateRangePicker extends Component {
  constructor(props) {
    super(props);
    this.state = {
      // 初始化日期为当前时间，你也可以改成默认的空值或指定日期
      fromDate: moment(),
      toDate: moment(),
      // 默认无激活输入框，点击后再设置
      activeInput: null
    };

    // 绑定事件上下文，避免this指向问题
    this.onClickFromDate = this.onClickFromDate.bind(this);
    this.onClickToDate = this.onClickToDate.bind(this);
    this.onSelect = this.onSelect.bind(this);
  }

  // 点击起始日期输入框，标记激活状态
  onClickFromDate() {
    this.setState({ activeInput: 'from' });
  }

  // 点击结束日期输入框，标记激活状态
  onClickToDate() {
    this.setState({ activeInput: 'to' });
  }

  // 日历选择日期后的处理逻辑
  onSelect(selectedDate) {
    const { activeInput, fromDate } = this.state;
    
    if (activeInput === 'from') {
      // 可选优化：如果起始日期晚于结束日期，自动同步结束日期
      const updatedToDate = selectedDate.isAfter(this.state.toDate) ? selectedDate : this.state.toDate;
      this.setState({
        fromDate: selectedDate,
        toDate: updatedToDate
      });
    } else if (activeInput === 'to') {
      // 合法性校验：结束日期不能早于起始日期
      if (selectedDate.isAfter(fromDate)) {
        this.setState({ toDate: selectedDate });
      } else {
        // 这里可以换成更友好的UI提示，比如内联文字提示
        alert('结束日期不能早于起始日期哦');
      }
    }

    // 可选：选完日期后重置激活状态，或者保持状态以便连续选择
    // this.setState({ activeInput: null });
  }

  render() {
    const { fromDate, toDate, activeInput } = this.state;
    return (
      <div className="date-range-picker">
        {/* 起始日期输入框 */}
        <label style={{ marginRight: '20px' }}>
          From
          <input
            type="text"
            onClick={this.onClickFromDate}
            value={fromDate.format('DD/MM/YYYY')}
            readOnly // 设为只读，避免用户手动输入格式错误的日期
            style={{ marginLeft: '8px' }}
          />
        </label>

        {/* 结束日期输入框 */}
        <label>
          To
          <input
            type="text"
            onClick={this.onClickToDate}
            value={toDate.format('DD/MM/YYYY')}
            readOnly
            style={{ marginLeft: '8px' }}
          />
        </label>

        {/* 日历组件：默认显示当前激活输入框的日期，提升用户体验 */}
        <div style={{ marginTop: '20px' }}>
          <Calendar
            date={activeInput === 'from' ? fromDate : toDate}
            onSelect={this.onSelect}
          />
        </div>
      </div>
    );
  }
}

export default DateRangePicker;

• 输入框只读设置：建议给输入框加readOnly属性，强制用户通过日历选择日期，避免手动输入带来的格式不兼容问题。
• 日期合法性校验：代码里加了结束日期不能早于起始日期的校验，你可以根据需求换成更优雅的提示方式（比如在输入框下方显示错误文字）。
• 日历默认日期：日历的date属性跟着激活的输入框走，比如点击From后，日历自动显示当前的起始日期，用户体验更流畅。
• 可选优化：如果用户选择的起始日期晚于结束日期，可以自动同步结束日期，避免出现逻辑矛盾的日期范围。

如果你用的是React 16.8+，可以用Hooks简化代码：

import React, { useState } from 'react';
import moment from 'moment';
import Calendar from 'react-calendar-pane';

const DateRangePicker = () => {
  const [fromDate, setFromDate] = useState(moment());
  const [toDate, setToDate] = useState(moment());
  const [activeInput, setActiveInput] = useState(null);

  const onClickFromDate = () => setActiveInput('from');
  const onClickToDate = () => setActiveInput('to');

  const onSelect = (selectedDate) => {
    if (activeInput === 'from') {
      const updatedToDate = selectedDate.isAfter(toDate) ? selectedDate : toDate;
      setFromDate(selectedDate);
      setToDate(updatedToDate);
    } else if (activeInput === 'to') {
      if (selectedDate.isAfter(fromDate)) {
        setToDate(selectedDate);
      } else {
        alert('结束日期不能早于起始日期哦');
      }
    }
    // setActiveInput(null); // 可选重置激活状态
  };

  return (
    <div className="date-range-picker">
      <label style={{ marginRight: '20px' }}>
        From
        <input
          type="text"
          onClick={onClickFromDate}
          value={fromDate.format('DD/MM/YYYY')}
          readOnly
          style={{ marginLeft: '8px' }}
        />
      </label>
      <label>
        To
        <input
          type="text"
          onClick={onClickToDate}
          value={toDate.format('DD/MM/YYYY')}
          readOnly
          style={{ marginLeft: '8px' }}
        />
      </label>
      <div style={{ marginTop: '20px' }}>
        <Calendar
          date={activeInput === 'from' ? fromDate : toDate}
          onSelect={onSelect}
        />
      </div>
    </div>
  );
};

export default DateRangePicker;

内容的提问来源于stack exchange，提问作者T.Doe