我可以根据 React 中的搜索框输入过滤元素吗？答案

【问题标题】：Can I filter elements based on searchbox input in React?我可以根据 React 中的搜索框输入过滤元素吗？
【发布时间】：2020-12-22 01:17:51
【问题描述】：

总的来说，我对 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 函数来直接删除其 classNames 不包含字母的元素在输入栏中输入。很抱歉这里正在进行初学者级别的工作。

【问题讨论】：

那么问题是什么？什么不工作？顺便说一句，您可以在codesandbox中编码，并分享一个链接。这样可以更轻松地查看您的问题

标签： javascript reactjs jsx jss

【解决方案1】：

React 的一个天才之处在于您可以抽象组件并动态渲染它们。为此，我将为所有项目创建一个可重用的组件，然后动态呈现它们。示例：

首先创建一个item组件

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>
)
}

将您的项目添加到状态并动态呈现您的状态
我还在此处添加了状态以进行搜索，并在我的输入和状态值之间设置了双向绑定
我还在项目的动态渲染中添加了过滤器方法

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

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>
     )

}

【讨论】：