使用React.js从列表中同时过滤日期和时间的方法可以通过以下步骤实现:
以下是一个示例代码:
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组件,包含一个日期选择器和一个时间选择器的输入框,用户可以通过选择日期和时间来过滤列表中的数据。列表中的数据是一个包含日期和时间属性的数组。在用户选择日期和时间时,会更新组件的状态中的对应变量,并通过过滤函数过滤数据并渲染到列表中。
注意:这个示例只是一个简单的演示,实际使用中可能需要根据具体需求进行适当调整和扩展。
领取专属 10元无门槛券
手把手带您无忧上云