小道具の値を変更

Question

だから、私は基本的にSearchFormコンポーネントと、今日のデータをAPIから表示するPostBoxコンポーネントを持つこのHomeコンポーネントを持っています。

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で送信ボタンがトリガされたとき、私は基本的にhttp://localhost:3000/posts/search/queryのような別のAPIにリクエストを送信する代わりに、今日のデータを示すことによってPostBoxに結果を示したいと思います。 私の質問は、handleSubmitSearch()によって変更されたPostBoxのURLの小道具をどのように変更できますか？

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> 
    ) 
    } 
});