javascript - 如何在组件内的 react.js 中创建搜索

Question

我有我的 react redux 项目，我想向 menuItems 组件添加搜索。但我似乎无法弄清楚如何搜索现有地图。我使用 onChange 事件创建了一个输入，该事件将状态设置为输入项。但我不能在那之后做什么。

class MenuItems extends Component {

    state = {
        searchTerm: '',
   
    }

    handleclick = (item) => {
        this.props.deleteMenuItem(item.id);
    }

    handleSearch = (event) => {
        this.setState({
            [event.target.name]: event.target.value
        })
    }

    filteredItem = () => {
       let filtered = [...this.props.menuItems].filter(item => item.name === "burger")
     
    }


    render(){

        let showItems = this.props.menuItems;

        return ( 
            <div>   

                <input 
                    placeholder="search"
                    name="searchTerm"
                    type="text"
                    value={this.state.searchTerm}
                    onChange={this.handleSearch}
                />

                {showItems.map((item) =>(
                    <li class="list" key={item.id}>
                        {item.name}
                        <br></br>
                        {item.body}
                        <br></br>
                        <img src={item.image}></img>
                        <br></br>
                        <button id={item.id} onClick={() => this.handleclick(item)}>delete </button>
                    </li>
                ))}

            </div>
        )
    }
}

export default connect(null, {deleteMenuItem})(MenuItems)

标签： javascriptreactjs

Answer 1

看起来您只需要使用您的 searchTerm 进行过滤，它就可以正常工作。

class MenuItems extends Component {
  state = {
    searchTerm: "",
  };

  handleclick = (item) => {
    this.props.deleteMenuItem(item.id);
  };

  handleSearch = (event) => {
    this.setState({
      [event.target.name]: event.target.value,
    });
  };

  render() {
    let showItems = this.props.menuItems;
    const filtered =
      [...this.props.menuItems].filter((item) =>
        item.name.includes(this.state.searchTerm)
      ) ?? [];

    return (
      <div>
        <input
          placeholder="search"
          name="searchTerm"
          type="text"
          value={this.state.searchTerm}
          onChange={this.handleSearch}
        />

        {showItems.map((item) => (
          <li className="list" key={item.id}>
            {item.name}
            <br></br>
            <button id={item.id} onClick={() => this.handleclick(item)}>
              delete
            </button>
          </li>
        ))}
        {filtered.map((item) => (
          <li className="list" key={item.id}>
            Filtered: {item.name}
            <br></br>
          </li>
        ))}
      </div>
    );
  }
}

const App = () => {
  return (
    <div>
      <MenuItems menuItems={[{ name: "name1" }, { name: "name2" }]} />
    </div>
  );
};