通过选择Reactjs/Mui中的字段进行搜索

8xiog9wr 于 2022-12-03 发布在 React

关注(0)|答案(1)|浏览(129)

我有搜索组件，将搜索用户名，全名，电子邮件和组织，这里的代码

const filterUser = (query, users) => {
if (!query) {
  return users;
} else {
  const filtered = users.filter((u) => {
    return (
      u.fullname.toLowerCase().startsWith(query.toLowerCase()) ||
      u.username.toLowerCase().startsWith(query.toLowerCase()) ||
      u.email.toLowerCase().startsWith(query.toLowerCase()) ||
      u.organization[0].toLowerCase().startsWith(query.toLowerCase())
    );
  });
  return filtered;
}

};
我想更新它的用户搜索输入字段，我已经做了下拉按钮，如图所示：Display
现在选择任何字段，我将设置值字段，但如何处理查询？我尝试这样做，但它不工作

const [value , setValue] = useState("username")
const  filterUser = (query, users , value) => {
    if (!query) {
      return users;
    } else {
      const filtered = users.filter((u) => {
        return (
          u.value.toLowerCase().startsWith(query.toLowerCase()) ||
        );
      });
      return filtered;
    }
  };

reactjs

来源：https://stackoverflow.com/questions/74653539/search-by-selecting-field-in-reactjs-mui

1条答案

按热度按时间

f0brbegy1#

看起来您正在尝试实现一个搜索功能，该功能允许用户按不同的字段（如用户名、全名、电子邮件和组织）搜索用户。为此，您可以更新filterUser函数，以接受一个field参数，该参数指定按哪个字段进行搜索，并使用该字段筛选用户。
例如，您可以像这样更新函数：

const filterUser = (query, users, field) => {
  if (!query) {
    return users;
  } else {
    const filtered = users.filter((u) => {
      return u[field].toLowerCase().startsWith(query.toLowerCase());
    });
    return filtered;
  }
};

现在，当你调用filterUser时，你可以将你想要搜索的字段作为第三个参数传入。例如，如果你想按用户名搜索，你可以这样调用函数：

filterUser(query, users, 'username');

您可以使用定义的value状态变量来存储所选字段，并在调用filterUser函数时将其传递给该函数。
我希望这对你有帮助！

赞(0）回复(0）举报 2022-12-03

我来回答

通过选择Reactjs/Mui中的字段进行搜索

1条答案

相关问题

热门标签

最新问答