在Reactjs中创建一个搜索栏过滤器

问题描述

大家好，我只想首先提到我是JS和React的新手。我想制作一个搜索栏以用标题过滤我的工作机会，但是我不知道如何进行。我已经进行了一些测试，但是我的代码与我看到的每个示例都不同，并且无法将搜索栏功能添加到我的代码中。这是我的代码：

import { render } from '@testing-library/react';
import React,{useState} from 'react';
import Card from 'react-bootstrap/Card'




const JobApplicationList = () => {

    
    
    const [jobapps,setJobapps] = useState([
       
           
       {
       title: 'Développeur MysqL PHP Symfony',company: 'Sony',city: 'Paris',description: 'Lorem ipsum dolor sit amet,consectetur adipiscing elit,sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.',id: 23123
       },{
        title: 'Développeur MysqL ',company: 'Corsair',city: 'Bordeaux',id: 231233
        },{
            title: 'Développeur PHP Symfony',company: 'Logitech',city: 'Lille',id: 2312353
        },{
            title: 'Développeur MERN ',company: 'Ubisoft',city: 'Montreal',id: 2312350
        },{
            title: 'Développeur AJAX',company: 'Microsoft',id: 2312354
        },]);


   
const JobApplication = ({title,company,city,description}) => {
    return (
 
     <div className="card_">
             <Card style={{ width: '100%' }}>
                 <Card.Body>
                     <Card.Title>{title}</Card.Title>
                     <Card.Subtitle className="mb-2 text-muted">{company} | {city}</Card.Subtitle>
                     <Card.Text>
                         {description}
                     </Card.Text>
                     <Card.Link href="#">Learn more</Card.Link>
                     <Card.Link href="#">Apply</Card.Link>
     
                 </Card.Body>
             </Card>
        </div>
 
        
    )
 }
   return(
        
        <div>
      <input type="text" placeholder="Enter item to be searched"  onChange={(e)=>this.searchSpace(e)} />
      {JobApplication}
      
        {jobapps.map(jobapp =>(
            <JobApplication title={jobapp.title} company={jobapp.company} city={jobapp.city} description={jobapp.description} key={jobapp.id}/>
        ))}
        </div>
        
    )

}
export default JobApplicationList;

在创建此搜索栏时，我将需要一点帮助。预先感谢

解决方法

import { render } from "@testing-library/react";
import React,{ useState } from "react";
import Card from "react-bootstrap/Card";

const JobApplicationList = () => {
   const [jobapps,setJobapps] = useState([
   {
  title: "Développeur MySQL PHP Symfony",company: "Sony",city: "Paris",description:
    "Lorem ipsum dolor sit amet,consectetur adipiscing elit,sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.",id: 23123,},{
  title: "Développeur MySQL ",company: "Corsair",city: "Bordeaux",id: 231233,{
  title: "Développeur PHP Symfony",company: "Logitech",city: "Lille",id: 2312353,{
  title: "Développeur MERN ",company: "Ubisoft",city: "Montreal",id: 2312350,{
  title: "Développeur AJAX",company: "Microsoft",id: 2312354,]);
//create query state to hold search value
const [query,setQuery] = useState("");

 return (
<div>
  {/*  give your quert state as value and update it on change*/}
  <input
    type="text"
    placeholder="Enter item to be searched"
    value={query}
    onChange={(e) => setQuery(e.target.value)}
  />
  {/*filter it by title before mapping*/}
  {jobapps
    .filter((jobapp) => jobapp.title.search(query) !== -1)
    .map((jobapp) => (
      <JobApplication
        title={jobapp.title}
        company={jobapp.company}
        city={jobapp.city}
        description={jobapp.description}
        key={jobapp.id}
      />
    ))}
    </div>
   );
  };

 //put it as separate component
  const JobApplication = ({ title,company,city,description }) => {
   return (
    <div className="card_">
  <Card style={{ width: "100%" }}>
    <Card.Body>
      <Card.Title>{title}</Card.Title>
      <Card.Subtitle className="mb-2 text-muted">
        {company} | {city}
      </Card.Subtitle>
      <Card.Text>{description}</Card.Text>
      <Card.Link href="#">Learn more</Card.Link>
      <Card.Link href="#">Apply</Card.Link>
       </Card.Body>
       </Card>
    </div>
   );
    };
  export default JobApplicationList;