我是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;
发布于 2018-10-08 01:27:13
前进的一种方式(可能是最好的方式,IMO)是这样的:
想出一个数据模型来描述一个单独的“过滤器”。这可以像描述名称字符串和地址字符串的对象一样简单,需要使用这些字符串对项目进行筛选。这是由你自己决定的;选择最好的。
然后,在Speakers
中构建两组行为
Filters
的过滤指令的能力。您可以通过在Speakers
中编写一个函数来实现这一点,该函数在Filters
中发生变化时充当回调函数。将此函数作为道具传递给Filters
,并让Filters
在其状态更改时调用它(这意味着,当您获得user interaction).List
。每次调用回调函数时,让Speakers
将其发送到List
。您可以通过将Filters
发送回的内容存储在Speakers
的状态中并将该状态项作为属性传递给List
来实现这一点。这应该会在每次Filters
调用回调函数时更新List
的属性,从而影响Speakers
的状态。然后,在List
中构建行为,使其基于此filter对象更改其呈现行为。确保检测到道具更新,这样它就可以在运行时工作。
https://stackoverflow.com/questions/52690686
复制相似问题