我的网站上有一个导航栏,当点击它们时会触发从道具传入的功能,如下所示:
<Filter
filter={this.props.params.filter}
sub={this.props.params.sub}
search={this.props.location.search}
fetchData={() => this.fetchData} />
过滤器组件:
<Link to={`/r/${this.props.sub}/new/${this.props.search}`} onClick={this.props.fetchData()}>
<span className="mdl-tabs__tab is-active">New</span>
</Link>
<Link to={`/r/${this.props.sub}/rising/${this.props.search}`} onClick={this.props.fetchData()}>
<span className="mdl-tabs__tab is-active">Rising</span>
</Link>
获取数据:
fetchData() {
if (this.props.params.sub) {
if (this.props.params.filter) {
let query = `${this.props.params.sub}/${this.props.params.filter}`;
this.props.fetchList(query, this.props.location.search);
}
}
}
我遇到的问题是,只要点击其中一个链接标记,它就会刷新整个页面。虽然这工作,我宁愿页面没有刷新。我在哪里错了?
答案 0 :(得分:1)
所以你有答案,也许,这可以帮助别人:你忘了在组件的构造函数中绑定事件处理程序。
export default YourComponent extends Component {
constructor(props) {
super(props)
this.fetchData = this.fetchData.bind(this)
}
fetchData() {
...
}
render() {
return (
...
<Link
to={`/r/${this.props.sub}/new/${this.props.search}`}
onClick={this.fetchData}
>
<span className="mdl-tabs__tab is-active">New</span>
</Link>
)
}
}