如何在 ReactJS 中正确搜索列表

Question

我正在尝试在用户界面中设置一个简单的搜索操作，如下所示：

我一共70个react-strapcards and each card contain a vessel with name, type and an image. I would like to search the name of the vessel and have the card related to that vessel to pop-up. All my images are currently contained inside the external database Contentful。在兴趣领域下方：

问题是我不知道如何编写查找列表特定值的搜索函数。

代码下方：

SideBar.js

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;

VesselSearch.js

import React, { Component } from 'react';

export default class SearchVessel extends Component {
    render() {
        const { value, handleSubmit, handleChange } = this.props;

        return (
            <React.Fragment>
                <div className="container">
                    <div className="row">
                        <div className="col-10 mx-auto col-md-8 mt-5 text-center">
                            <h4 className="text-slanted text-capitalize">Search for Vessel</h4>
                            <form className="mt-4" onSubmit={handleSubmit}>
                                <label htmlFor="search" className="text-capitalize">
                                    type vessel separated by comma
                                </label>
                                <div className="input-group">
                                    <input
                                        type="text"
                                        name="search"
                                        placeholder="Type name of vessel here"
                                        className="form-control"
                                        value={value}
                                        onChange={handleChange}
                                    />
                                    <div className="input-group-append">
                                        <button type="submit" className="input-group-text bg-primary text-white">
                                            <i className="fas fa-search" />
                                        </button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </React.Fragment>
        );
    }
}

到目前为止我做了什么：

1) 我尝试了与过滤功能的不同组合，我认为我很接近。问题是当我操作搜索时没有任何反应，为了找到我想要的船只卡，我必须向下滚动直到找到它。

我运行没有想法，如果您看到我没听懂的地方，请指出解决此问题的正确方向。

Answer 1

React 以可重用组件而闻名。您将在一个数组中拥有这些容器的所有数据。您将遍历数组并使用卡片 component.And 渲染项目，当您搜索您希望该容器弹出在顶部的特定卡片时。

有两种方法：

您必须运行遍历数组，找到该容器的索引，并尽一切努力操作您的数组并使该项目位于顶部并重新呈现您的列表。

或者，当用户单击搜索按钮时，在您的船舶列表顶部再呈现一个组件。你只需要找到项目索引并渲染它。这样您就不必处理数组操作。无论您有 80 张还是 1000 张卡片都没有关系。

请查看数组方法、数组切片和拼接的官方文档。希望这就是您要找的。如果您需要进一步的帮助，请发表评论。

Answer 2

你很接近！我会在您的状态中添加一个名为 'searchText' 的字段，然后创建一个基于该 searchText 状态项进行过滤的方法。

getFilteredShips = () => this.state.ships.filter(s => s.name.includes(this.state.searchText)

然后只需映射这些值即可呈现与搜索文本匹配的卡片。每次 searchText 值更新时，卡片都会更新。

this.getFilteredShips().map(ship => ..........

如何在 ReactJS 中正确搜索列表

How to properly search in a list in ReactJS

javascript

reactjs

contentful