时间戳

首页 > 解决方案 > 我可以根据 React 中的搜索框输入过滤元素吗？

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

问题描述

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

标签： javascriptreactjsjsxjss

解决方案

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

  1. 首先创建一个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>
)
}
  1. 将您的项目添加到状态并动态呈现您的状态
  2. 同样在这里我添加了状态来搜索并在我的输入和我的状态值之间设置了两种方式绑定
  3. 我还将过滤器方法添加到我的项目的动态渲染中

我建议添加像 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>
     )

}

推荐阅读