Передача состояния между двумя компонентами

Question

У меня есть компонент searchForm, который отображает компонент searchResult. Когда searchForm получает результаты, он должен передать состояние в состояние результата. Это, где я терпеть неудачу.

var SearchForm = React.createClass({ 
    getInitialState: function() { 
     return { 
      golden_record: {} 
     } 
    }, 
    handleSearchSubmit: function (search_param) { 
     $.ajax({ 
      url: this.props.url_variation, 
      type: 'GET', 
      data: search_param, 
      success: function (data) { 
       this.setState(
        { 
         ... 
        } 
       ); 
      }.bind(this), 
     }); 
     $.ajax({ 
      url: this.props.url_golden, 
      type: 'GET', 
      data: search_param, 
      success: function (data) { 
       var golden_record = { 
        'site': data.sites[0].name, 
        'country': data.sites[0].country, 
       }; 
       this.setState({'golden_record': golden_record}); 
      }.bind(this), 
     }) 
    }, 
    render: function() { 
     return (

       <div className="searchResult"> 
        <SearchResult 
         golden_record={this.state.golden_record} 
        /> 
       </div> 

     ); 
    } 
}); 

SearchResult:

Как вы можете видеть, Я передаю golden_record как свойство к SEARCHRESULT. Внутри SearchResult, когда я установил value из <input /> в собственность this.props.golden_record['site'], вход фиксирован на это значение. Но я хочу установить значение, а не this.state.site, чтобы потом изменить его, если захочу. Поэтому я не знаю, как скопировать значение константы только для чтения в состояние.

<input type="text" className="form-control" placeholder="Facility name" name="facilityName" onChange={this.onSiteChanged} value={this.props.golden_record['site']} ref="facilityName"></input> 

Любые предложения, пожалуйста?

Answer 1

В вашем SearchResult компонент, вы можете установить свое состояние в componentWillReceiveProps:

var SearchResult = React.createClass({ 
    ... 
    getInitialState: function(){ 
    return { 
     site: '' 
    } 
    }, 
    componentDidMount: function(){ 
    this.setState({ site: this.props.golden_record.site }); 
    }, 
    componentWillReceiveProps: function(newProps){ 
    this.setState({ site: newProps.golden_record.site }); 
    }, 
    render: function(){ 
    return <input type="text" className="form-control" placeholder="Facility name" name="facilityName" onChange={this.onSiteChanged} value={this.state.site} ref="facilityName"></input> 
    } 
});