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

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (1)
  • 关注 (0)
  • 查看 (197)

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

Speakers.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;

Filters.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;
提问于
用户回答回答于

前进的一种方式(可能是最好的方式,IMO)是这样的:

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

然后,构建两组行为Speakers

  1. 从中接收过滤指令的能力Filters。您可以通过编写一个函数来实现这一点,该函数在Speakers某些内容发生变化时充当回调函数Filters。将此函数作为prop传递,FiltersFilters在其状态发生变化时调用它(意味着,当您获得用户交互时)。
  2. 该过滤器对象发送的能力 List。每次调用回调函数时,都要Speakers将其发送到List。您可以通过存储FiltersSpeakers'状态发回的状态并将该状态项传递给List作为道具来实现此目的。这应该在List每次Filters调用回调函数时更新道具,从而影响Speakers'状态。

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

扫码关注云+社区

领取腾讯云代金券