Изменение значения реквизита

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 запускается, я хочу, чтобы в основном показать результат в PostBox, отправив запрос на другой API, как http://localhost:3000/posts/search/query вместо того чтобы показывать сегодняшние данные. Мой вопрос в том, как я могу изменить реквизит url на PostBox, измененный 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> 
    ) 
    } 
});