在 Reactjs/Mui 中通过选择 Field 进行搜索答案

【问题标题】：Search by selecting Field in Reactjs/Mui在 Reactjs/Mui 中通过选择 Field 进行搜索
【发布时间】：2022-12-08 10:06:54
【问题描述】：

我有搜索组件，可以按用户名、全名、电子邮件和组织进行搜索 , 这是它的代码

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 search input material-ui menu

【解决方案1】：

u.value.toLowerCase().startsWith(query.toLowerCase()) 正在寻找名为“value”的“u”对象的属性。

相反，尝试像这样使用a property accessor u[value].toLowerCase().startsWith(query.toLowerCase())

【讨论】：