我可以基于React中搜索框输入过滤元素吗？

问题描述

我对于反应和Web开发总体来说是新手，我想从制作一个非常简单的购物车应用程序开始。我在youtube上找到了一个不错的教程，现在正尝试对其进行扩展。我想添加一个搜索栏，以在您键入主页时过滤掉主页上的元素。

const Home = (props) => {
  function handleChange(e){
    console.log(e.target.value);
  }
  return (

    <div>
      <Row align="middle" className='title'> **search bar**
        <Input placeholder="Search for a school" onChange={handleChange} />
      </Row>

      <Row align="middle" className='title'>
        <Divider orientation="left"><b>Category E Schools</b></Divider>
      </Row>

      <Row align="middle" className='container'>
        **Every item for sale is in a Col element**
        <Col className = "Princeton University" xs={0} md={11} align="left">
          <div className='image'>
              <img src={Princeton} alt="Princeton University" />
              <h3>Princeton</h3>
              <h3>$1100.00</h3>
              <button onClick={() => props.addBasket('princeton')} className='addToCart cart1' href='#'>Add to Cart</button>
          </div>
        </Col>

我正在使用AntDesign Row-Col组件，我的想法是为每个Col定义一个className。我希望使用className可以实现handleChange函数来直接删除那些className不包含字母的元素在输入栏中输入。很抱歉在这里进行初学者级的工作。

解决方法

react天才的一面是，您可以提取组件并动态渲染它们。为此，我将为所有项目创建一个可重用的组件，然后动态呈现它们。 示例：

1. 首先创建一个项目组件

const Item = (props) => (
        <Col className = "Princeton University" xs={0} md={11} align="left">
          <div className='image'>
              <img src={props.image} alt={props.title} />
              <h3>{props.title}</h3>
              <h3>{props.cost}</h3>
              <button onClick={() => props.addBasket('princeton')} className='addToCart cart1' href='#'>Add to Cart</button>
          </div>
        </Col>
)
}

1. 将项目添加到状态并动态呈现状态
2. 也在这里我添加了状态以进行搜索，并在输入和状态值之间建立了两种方式的绑定
3. 我还为我的商品动态渲染添加了filter方法

我建议添加像loadash这样的库，并使用debounce函数，以便在用户完成键入后350ms一次重新渲染一次结果，而不是在用户每次击键时都重新渲染

const Home = (props) => {
   const [items,setItems] = useState([
    {name: Princeton,price: 140000.00,img: http:princetonimages.com/f313b},])
   const [search,setSearch] = useState('')
   const renderItems = (items) => (items.map(item => <Item {...item} />))

  return (

    <div>
      <Row align="middle" className='title'> **search bar**
        <Input 
        placeholder="Search for a school" 
        onChange={(e) => setSearch(e.target.value)} 
        value={search}
        />
      </Row>

      <Row align="middle" className='title'>
        <Divider orientation="left"><b>Category E Schools</b></Divider>
      </Row>

     <Row align="middle" className='container'>
     {renderItems(state.items.filter(search))}
     </Row>
     )

}