如何使用reactjs从列表中同时过滤日期和时间

使用React.js从列表中同时过滤日期和时间的方法可以通过以下步骤实现：

创建一个React组件，包含一个日期选择器和一个时间选择器的输入框以及一个用于显示过滤结果的列表。
在组件的状态中定义一个日期和一个时间的变量，用于存储用户选择的日期和时间。
在日期选择器和时间选择器的输入框上添加相应的事件处理函数，以便在用户选择日期和时间时更新状态中的变量。
在组件的渲染方法中，使用过滤函数过滤列表中的数据。过滤函数可以使用JavaScript的数组过滤方法，比如filter()，根据日期和时间进行过滤。
将过滤后的数据渲染到列表中，以显示过滤结果。

以下是一个示例代码：

import React, { useState } from 'react';

const FilteredList = () => {
  const [date, setDate] = useState('');
  const [time, setTime] = useState('');
  const data = [
    { id: 1, date: '2022-01-01', time: '10:00' },
    { id: 2, date: '2022-01-02', time: '12:00' },
    { id: 3, date: '2022-01-03', time: '14:00' },
  ];

  const handleDateChange = (event) => {
    setDate(event.target.value);
  };

  const handleTimeChange = (event) => {
    setTime(event.target.value);
  };

  const filteredData = data.filter((item) => {
    return item.date.includes(date) && item.time.includes(time);
  });

  return (
    <div>
      <input type="date" value={date} onChange={handleDateChange} />
      <input type="time" value={time} onChange={handleTimeChange} />
      <ul>
        {filteredData.map((item) => (
          <li key={item.id}>
            Date: {item.date}, Time: {item.time}
          </li>
        ))}
      </ul>
    </div>
  );
};

export default FilteredList;

这个示例代码实现了一个React组件，包含一个日期选择器和一个时间选择器的输入框，用户可以通过选择日期和时间来过滤列表中的数据。列表中的数据是一个包含日期和时间属性的数组。在用户选择日期和时间时，会更新组件的状态中的对应变量，并通过过滤函数过滤数据并渲染到列表中。

注意：这个示例只是一个简单的演示，实际使用中可能需要根据具体需求进行适当调整和扩展。