Как использовать фильтр поиска в боковой панели навигации в react js

#javascript #reactjs

Вопрос:

Я хочу использовать фильтр поиска на боковой панели, поэтому я создал фильтр поиска и реализовал его, но теперь он работает, отображается только поле ввода. и я остановился на том, как сопоставить элементы с фильтром поиска.

здесь я приложил часть своего рабочего кода:

 state = {
  search : ""
}

onchange = e =>{
  this.setState({search : e.target.val })
}

const Menu = ({ resources, onMenuTap, translate }) => {

const {search}=this.state;
  if (search !== "" amp;amp; resources.name.toLowerCase().indexof(search.toLowerCase()) === -1 ){
    return null
  }

  onchange = e =>{
    this.setState({search : e.target.val })
  }

return (
 <Card className={classes.sidebarCard}>
      {/* Search */}
     <input placeholder="Search" onChange={this.onchange} />
    //
      ....
   //
   );
};

1. Не могли бы вы поделиться простым примером своего кода в codesandbox ?

2. у вас есть 2 onchange декларации, когда вы ее используете. что такое onMenuTap фонкция ?

3. @Nokwiw Да! добавлено onChnage также, что это не работает. и onMenuTap это ничего, это для какой-то другой функциональности.

4. @Маджидм. я добавил свой код сюда — codesandbox.io/s/modest-worker-i42r4

5. Подождите, вы используете функциональный компонент или компонент реакции?

Ответ №1:

для вашего обмена, попробуйте использовать это :

 onchange = e =>{
  this.setState({search : e.target.value })
}

и в вашем поисковом вводе :

   {/* Search */}
 <input placeholder="Search" value={this.state.search} onChange={(e) => this.onchange(e)} />

1. я сталкиваюсь с ошибкой типа «состояние не определено» state = { search : "" } здесь.

2. вы используете функциональный компонент или компонент класса реакции ?

3. Я думаю, что вы используете функциональный компонент, в этом случае мы не можем использовать это.fr.reactjs.org/docs/hooks-state.html

Ответ №2:

Потому что вы используете функциональный компонент. Вам нужно использовать useState крюк:

   const [search, setState] = useState("");

  if (
    search !== "" amp;amp;
    resources.name.toLowerCase().indexof(search.toLowerCase()) === -1
  ) {
    return null;
  }

  onchange = (e) => {
    setState(e.target.val);
  };

Прикрепленный код sanbox основан на вашем коде. Но, похоже, это не оказывает:

Ответ №3:

Вы используете функциональный компонент. Поэтому вам нужно изменить свой код таким образом:

 const Menu = ({ resources, onMenuTap, translate }) => {
const [search, setSearch] = useState(""); //<-- this is your state

 const onchange = e =>{
    setSearch(e.target.val); //set the state
  }

  if (search !== "" amp;amp; resources.name.toLowerCase().indexof(search.toLowerCase()) === -1 ){
    return null
  }
return (
 <Card className={classes.sidebarCard}>
      {/* Search */}
     <input placeholder="Search" onChange={onchange} value={search} /> //<-- set value equal to search state
    {permissions === "Administrator" amp;amp; (
        <>
          <MenuItemLink
            className={classes.MenuItemLink}
            activeClassName={classes.active}
            to="/_apps"
            primaryText={translate("easyadmin.apps")}
            leftIcon={
              <AppsOutlined fontSize="small" className={classes.iconColor} />
            }
            onClick={onMenuTap}
          />
          <MenuItemLink
            className={classes.MenuItemLink}
            activeClassName={classes.active}
            to="/_entitys"
            primaryText={translate("easyadmin.customobjects")}
            leftIcon={
              <SettingsOutlinedIcon
                fontSize="small"
                className={classes.iconColor}
              />
            }
            onClick={onMenuTap}
          />
       )}
   );
};