如何在React.js中实现按名称和地址过滤
如何在React.js中实现按名称和地址过滤
提问于 2018-10-08 00:44:23
我是React.js的新手。我正在按名称和地址创建过滤器，但我不知道如何使用单独的组件来实现此目的。我有主要的组件扬声器-在这个组件中，我接收json并将此数据发送到过滤器和列表。在List.js中，我获取数据并显示所有扬声器条目(都是json)。在过滤器中，我想按名称和地址进行搜索。我不知道如何绑定组件过滤器和列表。如果你能帮我，我将不胜感激。我知道Redux有助于在React中处理数据，但我想知道如何在没有React的情况下做到这一点。enter image description here
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;回答 1
Stack Overflow用户
发布于 2018-10-08 01:27:13
前进的一种方式(可能是最好的方式，IMO)是这样的：
想出一个数据模型来描述一个单独的“过滤器”。这可以像描述名称字符串和地址字符串的对象一样简单，需要使用这些字符串对项目进行筛选。这是由你自己决定的；选择最好的。
然后，在Speakers中构建两组行为
- 接收来自
Filters的过滤指令的能力。您可以通过在Speakers中编写一个函数来实现这一点，该函数在Filters中发生变化时充当回调函数。将此函数作为道具传递给Filters，并让Filters在其状态更改时调用它(这意味着，当您获得user interaction). - The能力时，可以将此filter对象发送到
List。每次调用回调函数时，让Speakers将其发送到List。您可以通过将Filters发送回的内容存储在Speakers的状态中并将该状态项作为属性传递给List来实现这一点。这应该会在每次Filters调用回调函数时更新List的属性，从而影响Speakers的状态。
然后，在List中构建行为，使其基于此filter对象更改其呈现行为。确保检测到道具更新，这样它就可以在运行时工作。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/52690686
复制相关文章
相似问题