时间戳

首页 > 解决方案 > 如何根据所选值显示内容反应

javascript - 如何根据所选值显示内容反应

问题描述

我有一个对象数组

const people = [
    {
        group: 'senior'
        name: 'Yoda'
    },
    {
        group: 'youth'
        name: 'Kitty'
    },
    {
        group: 'adult'
        name: 'Lisa'
    },
]

我将该组存储在下拉列表中。如果从下拉列表中选择全部，将显示所有对象，如果从下拉列表中选择高级，则仅显示具有高级值的对象。

在反应中做到这一点的好方法是什么？

标签： javascriptarraysreactjsobjectstate

解决方案

使用 ReactJS 有很多方法，它可以基于使用的组件库，或者如果您将数据存储在 redux 或组件状态中。

以下是我在 using 使用组件状态时的方法<select>：

  1. 定义 const 来存储对象数组，命名为 PEOPLE

  2. 使用 useState 定义人员状态。

     const [people, setPeople] = useState(PEOPLE);

  3. 人的值是通过下拉()的更改事件过滤的，然后我为onChange下拉的事件编写了一个函数，并用过滤后的值更改组件中的人的状态。

     function selectGroup(e) {
     const value = e.target.value;
     const filteredPeople = value === "all" 
         ? PEOPLE : PEOPLE.filter((p) => p.group === value);
     setPeople(filteredPeople);
 }

你可以在这里查看我的演示。

推荐阅读