如何在React下拉筛选器中实现‘All（全部）’筛选功能？

你已经在ExpensesFilter组件中添加了"All"下拉选项，只需修改Expenses组件的筛选逻辑，就能实现选中"All"时显示所有支出的效果。

修改核心筛选逻辑 #

在Expenses.js中，调整filteredExpenses的过滤条件，增加对"All"选项的判断：

function Expenses(props) {
  const [filteredYear, setFilteredYear] = useState('2020');
  
  const filterChangeHandler = selectedYear => {
    setFilteredYear(selectedYear);
  };

  const filteredExpenses = props.items.filter(expense => {
    // 选中"All"时返回所有支出
    if (filteredYear === 'All') return true;
    // 否则按年份匹配筛选
    return expense.date.getFullYear().toString() === filteredYear;
  });

  return (
    <div>
      <Card className='expenses'>
        <ExpensesFilter selected={filteredYear} onChangeFilter={filterChangeHandler}/>
        <ExpensesChart expenses={filteredExpenses}/>
        <ExpensesList items={filteredExpenses}/>
      </Card>
    </div>
  );
};
export default Expenses;

可选优化：默认显示全部支出 #

如果希望页面初始化时就展示所有支出，将useState的初始值改为'All'即可：

const [filteredYear, setFilteredYear] = useState('All');

修改完成后，选择下拉框中的"All"选项，就能一次性显示所有支出记录了。

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