如何为 Material UI 搜索栏中的 "X" 图标添加功能？

Question

我有以下代码：

import SearchBar from "material-ui-search-bar";

const data = [
  {
    name: "Jane"
  },
  {
    name: "Mark"
  },
  {
    name: "Jason"
  }
];
export default function App() {
  const [results, setResults] = useState();

  const filteredResults = data.filter((item) => {
    return Object.keys(item)?.some((key) => {
      return item[key].includes(results?.toLowerCase());
    });
  });
  return (
    <div className="App">
      <SearchBar
        value={results}
        onChange={(value) => setResults(value)}
        placeholder="Please enter name..."
      />

      {filteredResults.map((item) => {
        return <li>{item.name}</li>;
      })}
    </div>
  );
}

codesandbox

当我使用删除键盘从搜索栏中删除名称时，数据中的所有名称都显示在搜索栏下方，但如果我单击 X 按钮，它会清除搜索栏但不会显示所有名称。有没有办法给这个 X 按钮添加一个功能，这样当我点击它时，它的作用与删除键盘的方式相同？

Answer 1

您可以将函数传递给 onCancelSearch 属性以重置 results 状态变量。

<SearchBar
  value={results}
  onChange={(value) => setResults(value)}
  onCancelSearch={() => setResults('')}
/>

建议

最好用空字符串初始化results。您现在可以删除 results?.toLowerCase() 中的 ?，因为 results 永远不会为空（undefined 或 null）。

const [results, setResults] = useState('')

您应该将 key 属性传递给 li 元素。您可以将 id 属性添加到项目数组以用作键或使用项目索引。

{
  filteredResults.map((item) => (
    <li key={item.id}>{item.name}</li>
  ))
}

并且过滤逻辑存在一些问题。

您正在将搜索查询转换为小写而不是名称。在您的示例中，如果您搜索 'ja'，即使存在匹配项（Jane 和 Jason）也不会显示任何内容。

includes

filteredResults 将抛出错误（您可以通过添加数字 id 来重现该问题字段到数组项）。您可以通过使用 searchableKeys 数组仅在特定字段中执行搜索来修复它。

const searchableKeys = ['name']

const filteredResults = data.filter((item) =>
  searchableKeys.some((key) =>
    item[key].toLowerCase().includes(results.toLowerCase())
  )
)

为清楚起见，我建议将 results 重命名为 query 或 searchQuery。

Answer 2

您好，在检查您的问题后，它在删除键（在键盘中）上重新映射列表的原因是因为它触发了 searchBar 的 onChange 事件以具有与 searchBar 相同的事件，我已经在我的结束，看来这个解决方案可以解决你的问题

<SearchBar
  value={results}
  onChange={(value) => setResults(value)}
  placeholder="Please enter name..."
  closeIcon={<button onClick={() => setResults("")}>clear</button>}
/>

closeIcon 道具 - 覆盖关闭图标及其方法.. 这是我检查的文档 material-ui-search-bar

这里还有replicated/solvedcode-sandbox

如何为 Material UI 搜索栏中的 "X" 图标添加功能？

How to add function to "X" icon in Material UI Searchbar?

javascript

searchbar

reactjs

建议