import React, { useState } from 'react';
function WeekDaysList() {
const [days, setDays] = useState(['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday']);
function handleDelete(index) {
// 使用 .filter() 方法从数组中删除所选 day
const newDays = days.filter((day, i) => i !== index);
setDays(newDays);
}
return (
{days.map((day, index) => (
- handleDelete(index)}>{day}
))}
);
}
export default WeekDaysList;
在上面的组件中,我们首先在状态中创建了一个名为 days
的数组,其中包含七天的字符串。之后我们使用 .map()
方法 将每个day显示为列表项 。当用户单击任一天时,我们会调用
handleDelete()
函数,并将其与列表中的索引一起传递。在 handleDelete()
函数中,我们使用 .filter()
方法从数组中删除选定日期,并使用 setDays()
更新 days
的状态。
您可以在需要的地方渲染
组件。