基于DateRangeSelector用户输入的日期筛选（react-datepicker实现）

解决方案 #

我们需要将日期选择器的状态传递给父组件，在父组件中完成筛选逻辑，同时确保筛选结果可被外部访问。以下是修改后的完整代码：

import React, { useState } from "react";
import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";

// 日期选择器组件，通过回调传递状态给父组件
class DateRangeSelector extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      showAll: true,
      startDate: null,
      endDate: null
    };

    this.handleCheckboxChange = this.handleCheckboxChange.bind(this);
    this.handleStartDateChange = this.handleStartDateChange.bind(this);
    this.handleEndDateChange = this.handleEndDateChange.bind(this);
    this.notifyParent = this.notifyParent.bind(this);
  }

  // 状态变化时通知父组件
  notifyParent() {
    this.props.onFilterChange({
      showAll: this.state.showAll,
      startDate: this.state.startDate,
      endDate: this.state.endDate
    });
  }

  handleCheckboxChange(event) {
    this.setState({ showAll: event.target.checked }, this.notifyParent);
  }

  handleStartDateChange(date) {
    this.setState({ startDate: date }, this.notifyParent);
  }

  handleEndDateChange(date) {
    this.setState({ endDate: date }, this.notifyParent);
  }

  render() {
    return (
      <form>
        <label>
          <input
            type="checkbox"
            checked={this.state.showAll}
            onChange={this.handleCheckboxChange}
          />
          显示全部日期
        </label>
        <br />
        <label>
          开始日期:
          <DatePicker
            selected={this.state.startDate}
            onChange={this.handleStartDateChange}
          />
        </label>
        <br />
        <label>
          结束日期:
          <DatePicker
            selected={this.state.endDate}
            onChange={this.handleEndDateChange}
          />
        </label>
      </form>
    );
  }
}

// 原始日期数组
const my_date_array = ["12/07/2022", "11/30/2022", "09/08/2022", "04/07/2020", "11/04/1994"];

// 日期转换工具函数：将字符串日期转为Date对象
const convertToDate = (dateStr) => {
  const [month, day, year] = dateStr.split("/");
  return new Date(year, month - 1, day);
};

// 独立筛选逻辑函数：可在外部直接调用
export const filterDates = (showAll, startDate, endDate) => {
  if (showAll) return [...my_date_array];
  
  // 未选择起止日期时返回空数组，可按需调整
  if (!startDate || !endDate) return [];
  
  return my_date_array.filter(dateStr => {
    const date = convertToDate(dateStr);
    return date >= startDate && date <= endDate;
  });
};

const App = () => {
  // 存储筛选后的日期数组
  const [filteredDates, setFilteredDates] = useState(my_date_array);

  // 接收日期选择器的状态变化，执行筛选
  const handleFilterChange = (filterParams) => {
    const result = filterDates(filterParams.showAll, filterParams.startDate, filterParams.endDate);
    setFilteredDates(result);
  };

  return (
    <div>
      <DateRangeSelector onFilterChange={handleFilterChange} />
      <h3>筛选结果:</h3>
      <ul>
        {filteredDates.map((date, index) => (
          <li key={index}>{date}</li>
        ))}
      </ul>
    </div>
  );
};

export default App;

关键说明 #

• 状态传递：给DateRangeSelector添加onFilterChange回调，每当复选框或日期选择变化时，将当前状态同步给父组件App，确保父组件能实时获取筛选条件。
• 独立筛选逻辑：抽离filterDates函数，可在组件外部直接调用（比如其他组件、工具类中），满足“筛选后的数组需能在函数外部被调用使用”的要求。
• 日期处理：用convertToDate将字符串日期转为标准Date对象，避免字符串直接比较的误差，保证日期范围判断的准确性。
• 结果展示：在App中用useState维护筛选后的数组，并渲染为列表展示在页面上。

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