ReactJs 在项目列表中搜索答案

【问题标题】：ReactJs Search inside a list of itemsReactJs 在项目列表中搜索
【发布时间】：2021-04-13 09:05:16
【问题描述】：

我正在使用 React material-ui 搜索栏来搜索列表中的项目。我创建了搜索栏组件，它将列表组件中的项目数组作为属性。

问题：我希望在搜索项目时仅显示父列表中的项目。我遵循了以下教程，但没有一个对我有用。

Create a Simple Search Component in React.js using React Hooks

How to use onchange with autocomplete material ui?

下面是组件的代码：

列表组件：

<List
  component="nav"
  aria-labelledby="nested-list-subheader"
  subheader={
    <ListSubheader component="div" id="nested-list-subheader">
      <SearchBar items={items} /> //Calling SeacrhBar Component
    </ListSubheader>
  }
>
  {items.map((item, index, list) => (
    <Fragment key={item.id}>
      <ListItem
        button
        key={item.id}
        onClick={() => changeSubList(0)}
        onDoubleClick={() =>
            changeSubList(item)
        }
      >
        <ListItemText primary={item.name}/>
        <ListItemSecondaryAction>
        </ListItemSecondaryAction>
      </ListItem>
      <Collapse in={openItemID === item.id} timeout="auto" unmountOnExit>
        <List component="div" disablePadding>
          <ListItem button className={classes.nested}>
          </ListItem>
          <item itemId={item.id}/>
        </List>
      </Collapse>
    {index < list.length - 1 ? <Divider/> : null}
  </Fragment>
  ))}
</List>

搜索栏组件：

      const SearchBar = ({items}) => {
        const [searchTerm, setSearchTerm] = useState("");
        const [searchResults, setSearchResults] = useState([]);
         const handleChange = event => {
            setSearchTerm(event.target.value);
        };
        useEffect(() => {
            const results = items.filter(deivce =>
                deivce.name.toLowerCase().includes(searchTerm)
            );
            setSearchResults(results);
        }, [searchTerm]);
    
        return (
            <div>
                <input
                    type="text"
                    placeholder="Search"
                    value={searchTerm}
                    onChange={handleChange}
                />
                <ul>
                    {searchResults.map(item => (
                        <li key={item.id}>{items}</li>
                    ))}
                </ul>
            </div>
        );
    }
export default SearchBar;

item 是 item 的数组，如下所示：

"items ": Array(3)
 0: {id: 1, attributes: {…}, groupId: 1, name: "1", uniqueId: "1236547"}
 1: {id: 2, attributes: {…}, groupId: 1, name: "2", uniqueId: "98766541"}
 2: {id: 7, attributes: {…}, groupId: 3, name: "2", uniqueId: "98745698"}
    
 {
   "id": 1,
        "attributes": {
            "Course ": "English",
            "Workhours": 80
        },
        "groupId": 1,
        "name": "1",
        "uniqueId": "1236547",
        "status": "still working"
    }

提前致谢

【问题讨论】：

能否展示items的数据结构
@Alloylo，钩子在哪里？你在哪里定义了钩子，它是什么样子的？
抱歉@hotcakedev 打扰了。我是新手，不知道在搜索栏组件或列表组件中的何处使用钩子。
@Alloylo，您必须通过使用useState 的事件处理程序将关键字设置为searchBar 组件。
@Alloylo，你能制作 CodePen 吗？

标签： javascript reactjs react-hooks material-ui

【解决方案1】：

谢谢大家，我已经解决了这个问题。上次更新代码后，只需在列表组件中添加搜索组件，如下代码。

    return (
    <List component="nav"
          aria-labelledby="nested-list-subheader"
          subheader={
              <ListSubheader component="div" id="nested-list-subheader">
              </ListSubheader>
          }>
        <SearchBar items={items}/>
    </List>
);

【讨论】：