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>

const Home=（道具）=>{
功能手柄更改（e）{
console.log（如target.value）；
}
返回(
**搜索栏**
E类学校
**每一件待售商品都包含一个Col元素**
普林斯顿大学
$1100.00
props.addBasket（'princeton'）}className='addtocart1'href='#'>添加到购物车

---

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

Pat of the genius当然，react是您可以抽象组件并动态呈现它们。为此，我将为所有项目创建一个可重用组件，然后动态呈现它们。 例如：

首先创建一个item组件

const项目=（道具）=>(
{props.title}
{props.cost}
props.addBasket（'princeton'）}className='addtocart1'href='#'>添加到购物车
)
}

将项目添加到状态并动态呈现状态

在这里，我还添加了搜索状态，并在输入和状态值之间建立了双向绑定

我还将filter方法添加到项目的动态呈现中

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

}

const Home=（道具）=>{
const[items，setItems]=useState([
{名称：普林斯顿，价格：140000.00，img:http:princetonimages.com/f313b}，
])
const[search，setSearch]=useState（“”）
常量renderItems=（items）=>（items.map（item=>）
返回(
**搜索栏**
setSearch（e.target.value）}
值={search}
/>
E类学校
{renderItems（state.items.filter（search））}
)
}

那么问题是什么？什么不起作用？顺便说一句，您可以在codesandbox中编写代码，并共享一个链接。这样更容易了解您的问题所在

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

}