主页 / 问题 / 1334031
Accepted
TutusT
Asked:2022-10-01 16:49:37 +0000 UTC2022-10-01 16:49:37 +0000 UTC

在反应中过滤

  • 772

请告诉我如何通过按钮进行搜索：有这样的结构，显示团队列表，内部显示用户。如何按用户在特定团队中进行筛选？

teams: Array(2)
0: {id: 175, name: '1', active: true, self: false, level: null, …}
1: {id: 176, name: '2', active: true, self: false, level: null, …}



users: Array(3)
0: {userId: null, name: 'aaaa', email: '', groupId: 175, level: 4}
1: {userId: 73, name: 'Tester1112', email: 'werobe7111@biiba.com', groupId: 176, level: 1}
2: {userId: 73, name: 'Tester1112', email: 'werobe7111@biiba.com', groupId: 175, level: 1}
javascript

1 个回答

  1. Best Answer

    您可以创建一个<TeamItem />显示命令的组件。接下来，在渲染每个命令时，我们创建一个用于过滤的状态。我们还为过滤文本的输入创建input。在渲染用户的时候，我们首先对用户数组进行过滤，排除过滤器不包含在列表中的用户。结果是这样的：

    // import React from "react";

const teams = [
  {
    name: "team1",
    users: [
      { userId: 73, name: "Gary Tester 73" },
      { userId: 74, name: "Thomas Tester 74" },
      { userId: 75, name: "Sven Tester 75" },
    ],
  },
  {
    name: "team2",
    users: [
      { userId: 63, name: "John 63" },
      { userId: 64, name: "Mary 64" },
      { userId: 65, name: "Moly 65" },
    ],
  },
  {
    name: "team3",
    users: [
      { userId: 53, name: "Abc 53" },
      { userId: 54, name: "Adef 54" },
      { userId: 55, name: "Def 55" },
    ],
  },
];

const App = () => {
  const [state, setState] = React.useState(teams);

  return (
    <div>
      {state.map((team) => (
        <TeamItem key={team.name} name={team.name} users={team.users} />
      ))}
    </div>
  );
};

const TeamItem = ({ name, users }) => {
  const [filter, setFilter] = React.useState("");
  return (
    <div
      key="name"
      style={{ border: "1px solid black", margin: "1rem", padding: "1rem" }}
    >
      <div>Team name : {name}</div>
      <label for="filter">Filter users:</label>
      <input
        value={filter}
        onChange={({ target: { value } }) => setFilter(value)}
        id="filter"
      />
      <div>
        Users :
        {users
          .filter((user) => user.name.toLowerCase().includes(filter.toLowerCase()))
          .map((user) => (
            <div key={user.userId}>User name: {user.name}</div>
          ))}
      </div>
    </div>
  );
};

// export default App;

ReactDOM.render(<App />, document.getElementById('root'));
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>
<div id="root"></div>

    • 1

相关问题