在Reactjs中制作一个搜索栏过滤器

Question

大家好，我只是想先提一下，我是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',
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: 231233
},
{
title: 'Développeur PHP Symfony',
company: 'Logitech',
city: 'Lille',
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: 2312353
},
{
title: 'Développeur MERN ',
company: 'Ubisoft',
city: 'Montreal',
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: 2312350
},
{
title: 'Développeur AJAX',
company: 'Microsoft',
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: 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;

如果能帮我做这个搜索栏，我将不胜感激。提前感谢

Answer 1

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",
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: 231233,
},
{
title: "Développeur PHP Symfony",
company: "Logitech",
city: "Lille",
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: 2312353,
},
{
title: "Développeur MERN ",
company: "Ubisoft",
city: "Montreal",
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: 2312350,
},
{
title: "Développeur AJAX",
company: "Microsoft",
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: 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;