更改道具值
问题描述:
所以,我基本上有这Home
组件,它具有SearchForm
组件和PostBox
组件显示今天的API数据。更改道具值
var Home = React.createClass({
handleSubmitSearch: function (e) {
e.preventDefault();
// change the URL
},
render: function() {
return (
<div className="home">
<SearchForm
onSubmitSearch={this.handleSubmitSearch} />
<PostBox
url="http://localhost:3000/posts/today"
pollInterval={2000} />
</div>
)
}
});
的事情是,在SearchForm
提交按钮被触发时,我想基本上是通过发送请求到另一个API像http://localhost:3000/posts/search/query
而不是显示今天的数据结果显示为PostBox
。 我的问题是,我怎样才能改变PostBox
的url道具改为handleSubmitSearch()
?
答
在这种情况下,我会将url
置于状态并在提交表单时更改它。
var Home = React.createClass({
getInitialState: function() {
return {url: 'http://localhost:3000/posts/today'};
},
handleSubmitSearch: function (e) {
e.preventDefault();
var value = ''; // TODO: get value that you want
this.setState({
url: 'http://localhost:3000/posts/' + value,
});
},
render: function() {
return (
<div className="home">
<SearchForm
onSubmitSearch={this.handleSubmitSearch} />
<PostBox
url={this.state.url}
pollInterval={2000} />
</div>
)
}
});
您不改变'道具'。组件'道具'应该被视为不可变的。如果某个组件需要存储可以更改的数据,请改用'state'。 – naomik