时间戳

首页 > 解决方案 > 如何在 React.js 中按名称和地址进行过滤

reactjs - 如何在 React.js 中按名称和地址进行过滤

问题描述

我是 React.js 的新手。我正在按名称和地址进行过滤，但我不知道如何使用单独的组件来执行此操作。我有主要组件扬声器 - 在此组件中，我接收 json 并将此数据发送到过滤器和列表。在 List.js 中，我获取数据并显示所有扬声器项目（所有 json）。在过滤器中，我想按名称和地址进行搜索。我不知道如何绑定组件过滤器和列表。如果你能帮助我，我将不胜感激。我知道 Redux 有助于在 React 中处理数据，但我想了解如何在没有它的情况下做到这一点。 在此处输入图像描述

扬声器.js

import React, {Component} from 'react';
import Filters from './Filters';
import List from './List';

class Speakers extends Component {
    constructor(props) {
        super(props);
        this.state = {
            isLoading: false,
            items: []
        }
    }

    componentDidMount() {
        this.setState({isLoading: true});
        fetch("https://randomapi.com/api/6de6abfedb24f889e0b5f675edc50deb?fmt=raw&sole")
            .then(res => res.json())
            .then(
                (result) => {
                    this.setState({
                        items: result,
                        isLoading: false
                    });
                    console.log(result);
                }
            )
            .catch(error => this.setState({ error, isLoading: false }));
    }

    render() {
        return (
            <div className="speakers">
                <div className="container-fluid">
                    <Filters getItems={this.state} />
                    <List getItems={this.state} />
                </div>
            </div>
        );
    }
}

export default Speakers;

List.js

import React, {Component} from 'react';

class List extends Component {
    render() {
        const {items, isLoading} = this.props.getItems;
        if (isLoading) {
            return <p>Loading ...</p>;
        } 

        return (
            <div className="speakers__list">
                <div className="row">
                    {items.map((item, index) => (
                        <div className="col-md-3" key={index}>
                            <div className="card form-group shadow">
                                <div className="card-body text-center">
                                    <h5 className="card-title">{item.first} {item.last}</h5>
                                    <p>{item.email}</p>
                                    <p>{item.address}</p>
                                    <p>{item.balance}</p>
                                    <p>{item.created}</p>
                                </div>
                            </div>
                        </div>
                    ))}
                </div>
            </div>
        )
    }
}

export default List;

过滤器.js

import React, {Component} from 'react';

class Filters extends Component {
    render() {
        return (
            <div className="filters">
                <div className="alert shadow">
                    <form>
                        <div className="container-fluid">
                            <div className="row">
                                <div className="col-md-5">
                                    <label>Name/Surname</label>
                                    <input type="text" className="form-control" />
                                </div>
                                <div className="col-md-5">
                                    <label>Address</label>
                                    <input type="text" className="form-control"/>
                                </div>
                                <div className="col-md-2 align-self-center text-center">
                                    <button className="btn btn-primary">Search</button>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        );
    }
}

export default Filters;

标签： reactjs

解决方案

一种前进的方式（可能是最好的方式，IMO）是这样的：

提出一个数据模型来描述单个“过滤器”。这可以像描述项目需要使用的名称字符串和地址字符串来过滤的对象一样简单。这个设计取决于你；选择最有效的。

然后，将两组行为构建到Speakers：

  1. 接收过滤指令的能力Filters。您可以通过编写一个函数来实现这一点，该函数Speakers在Filters. 将此函数作为道具传递给Filters并Filters在其状态更改时调用它（意思是，当您获得用户交互时）。
  2. 将此过滤器对象发送到的能力 List。每次调用回调函数时，都Speakers将其发送到List. 您可以通过存储Filters以 ' 状态返回的内容并将该状态项作为道具Speakers向下传递来实现此目的。List这应该List在每次Filters调用回调函数时更新 ' 道具，从而影响Speakers' 状态。

然后，构建行为List，使其基于此过滤器对象更改其呈现行为。确保检测道具更新，以便它可以即时运行。

推荐阅读