更改道具值

Question

所以，我基本上有这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()？

Answer 1

在这种情况下，我会将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> 
    ) 
    } 
});