Javascript 如何在ReactJS中正确搜索列表
我正在尝试在用户界面中设置一个简单的搜索操作，如下所示： 我总共有70个Javascript 如何在ReactJS中正确搜索列表,javascript,reactjs,contentful,Javascript,Reactjs,Contentful,我正在尝试在用户界面中设置一个简单的搜索操作，如下所示： 我总共有70个react strip，每张卡片包含一个容器，上面有名称、类型和图像。我想搜索船只的名称，并弹出与该船只相关的卡片。我的所有图像当前都包含在外部数据库中。兴趣领域如下： 问题是我不知道如何编写搜索函数来定位列表的特定值 代码如下： 侧边栏.js import React from 'react'; import Client from '../Contentful'; import SearchVessel from '
react stripimport React from 'react';
import Client from '../Contentful';
import SearchVessel from '../components/SearchVessel';
class Sidebar extends React.Component {
state = {
ships: [],
};
async componentDidMount() {
let response = await Client.getEntries({
content_type: 'cards'
});
const ships = response.items.map((item) => {
const {
name,
slug,
type
} = item.fields;
return {
name,
slug,
type
};
});
this.setState({
ships
});
}
getFilteredShips = () => {
if (!this.props.activeShip) {
return this.state.ships;
}
let targetShip = this.state.ships.filter(
(ship) => this.props.activeShip.name === ship.name
);
let otherShipsArray = this.state.ships.filter((ship) => this.props.activeShip.name !== ship.name);
return targetShip.concat(otherShipsArray);
};
render() {
return (
<div className="map-sidebar">
{this.props.activeShipTypes}
<SearchVessel />
<pre>
{this.getFilteredShips().map((ship) => {
console.log(ship);
return (
<Card className="mb-2">
<CardImg />
<CardBody>
<div className="row">
<img
className="image-sizing-primary"
src={ship.companylogo.fields.file.url}
alt="shipImage"
/>
</div>
<div>
<img
className="image-sizing-secondary"
src={ship.images.fields.file.url}
alt="shipImage"
/>
</div>
<CardTitle>
<h3 className="thick">{ship.name}</h3>
</CardTitle>
<CardSubtitle>{ship.type}</CardSubtitle>
<CardText>
<br />
<h6>Project Details</h6>
<p>For a description of the project view the specification included</p>
</CardText>
<Row style={{ marginTop: '20px' }}>
<div className="buttoncontainer">
<div className="btn btn-cards">
<a
className="buttonLink"
download
href={ship.projectnotes.fields.file.url}
>
Project Notes
</a>
</div>
<div className="btn btn-cards">
<a className="buttonLink" href={ship.abstract.fields.file.url}>
Abstract
</a>
</div>
</div>
</Row>
</CardBody>
</Card>
);
})}
</pre>
</div>
);
}
}
export default Sidebar;
getFilteredShips = () => this.state.ships.filter(s => s.name.includes(this.state.searchText)
从“React”导入React；
从“../Contentful”导入客户端；
从“../components/SearchVesser”导入SearchVesser；
类侧栏扩展了React.Component{
状态={
船舶：[]，
};
异步组件didmount（）{
let response=wait Client.getEntries({
内容类型：“卡片”
});
const ships=response.items.map（（item）=>{
常数{
名称
鼻涕虫
类型
}=项目字段；
返回{
名称
鼻涕虫
类型
};
});
这是我的国家({
船舶
});
}
getFilteredShips=（）=>{
如果（！this.props.activeShip）{
归还这个州的船；
}
让targetShip=this.state.ships.filter(
（ship）=>this.props.activeShip.name===ship.name
);
让otherShipsArray=this.state.ships.filter（（ship）=>this.props.activeShip.name！==ship.name）；
返回targetShip.concat（其他飞船阵列）；
};
render（）{
返回(
{this.props.activeShipTypes}
{this.getFilteredShips（）.map（（ship）=>{
控制台.日志（船舶）；
返回(
{ship.name}
{ship.type}
项目详情
有关项目视图的说明，请参见规范
);
})}
);
}
}
导出默认边栏；
import React from 'react';
import Client from '../Contentful';
import SearchVessel from '../components/SearchVessel';
class Sidebar extends React.Component {
state = {
ships: [],
};
async componentDidMount() {
let response = await Client.getEntries({
content_type: 'cards'
});
const ships = response.items.map((item) => {
const {
name,
slug,
type
} = item.fields;
return {
name,
slug,
type
};
});
this.setState({
ships
});
}
getFilteredShips = () => {
if (!this.props.activeShip) {
return this.state.ships;
}
let targetShip = this.state.ships.filter(
(ship) => this.props.activeShip.name === ship.name
);
let otherShipsArray = this.state.ships.filter((ship) => this.props.activeShip.name !== ship.name);
return targetShip.concat(otherShipsArray);
};
render() {
return (
<div className="map-sidebar">
{this.props.activeShipTypes}
<SearchVessel />
<pre>
{this.getFilteredShips().map((ship) => {
console.log(ship);
return (
<Card className="mb-2">
<CardImg />
<CardBody>
<div className="row">
<img
className="image-sizing-primary"
src={ship.companylogo.fields.file.url}
alt="shipImage"
/>
</div>
<div>
<img
className="image-sizing-secondary"
src={ship.images.fields.file.url}
alt="shipImage"
/>
</div>
<CardTitle>
<h3 className="thick">{ship.name}</h3>
</CardTitle>
<CardSubtitle>{ship.type}</CardSubtitle>
<CardText>
<br />
<h6>Project Details</h6>
<p>For a description of the project view the specification included</p>
</CardText>
<Row style={{ marginTop: '20px' }}>
<div className="buttoncontainer">
<div className="btn btn-cards">
<a
className="buttonLink"
download
href={ship.projectnotes.fields.file.url}
>
Project Notes
</a>
</div>
<div className="btn btn-cards">
<a className="buttonLink" href={ship.abstract.fields.file.url}>
Abstract
</a>
</div>
</div>
</Row>
</CardBody>
</Card>
);
})}
</pre>
</div>
);
}
}
export default Sidebar;
getFilteredShips = () => this.state.ships.filter(s => s.name.includes(this.state.searchText)
import React，{Component}来自'React'；
导出默认类SearchVesser扩展组件{
render（）{
const{value，handleSubmit，handleChange}=this.props；
返回(
搜寻船只
输入以逗号分隔的容器
);
}
}
我的想法已经没有了，如果您看到我没有抓住的东西，请为我指出解决此问题的正确方向。React以可重用组件而闻名。您将拥有阵列中这些血管的所有数据。你将在数组中循环，并使用卡片组件呈现项目。当你搜索特定的卡片时，你希望容器在顶部弹出 有两种方法可以做到这一点： 您必须遍历数组，找到该容器的索引，并尽一切努力操纵数组，使该项位于顶部并重新呈现列表 或者，当用户单击“搜索”按钮时，在容器列表顶部再渲染一个组件。您只需找到项目索引并进行渲染。这样，您就不必处理数组操作。不管你有80张卡还是1000张卡 请查阅有关阵列方法、阵列切片和拼接的官方文档。
希望这就是你要找的。如果您需要进一步的帮助，请发表评论 你接近了！我会在您的状态中添加一个名为“searchText”的字段，然后创建一个基于该searchText状态项进行筛选的方法
this.getFilteredShips().map(ship => ..........