レンダリング機能で反応する子コンポーネントの状態をチェックする方法は？

Question

私は2つのコンポーネントをレンダリングしていますSearchFormとRecentSearchは

var SearchFormContainer = React.createClass({ 
    render: function() { 
    return (
     <div> 
     <SearchForm /> 
     <RecentSearch /> 
     </div>  
    );; 
    } 
}); 

ようSearchForm内の状態があります。最近の検索コンポーネントをレンダリングしたい状態に基づいています。 SearchFromの状態を確認するにはどうすればよいですか？私が試みたのは：

var SearchFormContainer = React.createClass({ 
    render: function() { 
    return (
     <div> 
     <SearchForm ref="search_form"/> 
     {this.refs.search_form.state ? <RecentSearch /> : null} 
     </div> 
    ); 
    } 
}); 

this.refs.search_form.state returing undefinedです。

Answer 1

親コンテナ（SearchFormContainer）に状態を保存します。この状態を更新します。コールバック関数を使用してSearchFormに渡します。このような何か：

const Container = React.createClass({ 
    onSearch(value) { 
    this.setState({search: value}); 
    } 
    render() { 
    <div> 
     <SearchForm onSearch={this.onSearch} /> 
     <RecentSearch recentValue={this.state.search} /> 
    </div> 
    } 
}); 

const SearchForm = ({onSearch}) => { 
    return (
    <input 
     type="search" 
     onChange={event => onSearch(event.target.value)} 
    /> 
); 
} 

また、私は&ダムコンポーネントスマ​​ート程度ダンAbromovことで、この記事をお勧めします。 https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0#.qq4cufc2c

・ホープ、このことができます！

Answer 2

React状態では、コンポーネントレベルの概念であり、上から下に小道具を子コンポーネントに渡して実際には逆ではありません。

あなたは基本的にSearchForm提出を追跡し、あなたのSearchFormContainerコンポーネントの状態の余分なレイヤを追加し、条件付きでそれに基づいてRecentSearchレンダリングする可能性のいずれかSearchFormの状態に基づいて、あなたのRecentSearchコンポーネントをレンダリングしたい場合は

。

var SearchFormContainer = React.createClass({ 

    getInitialState: function() { 
    return { userHasSearched: false } 
    }, 

    onSearchSubmit: function() { 
    this.setState({ userHasSearched: true }); 
    }, 

    render: function() { 
    return (
     <div> 
     //Pass submit handler down to the SearchForm component 
     <SearchForm onSubmit={this.onSearchSubmit} /> 
     {this.state.userHasSearched ? <RecentSearch /> : null} 
     </div> 
    ); 
    } 
}); 

またはより良い、（あなたがSearchFormContainer将来の特定の意図を持っていない限り）を導入だ余分な複雑さを削除し、ちょうどあなたの状態が実際の瞬間に位置しています<SearchForm />、内部の条件付きでご<RecentSearch />コンポーネントを返します。