他のコンポーネントを呼び出した後にコンポーネント内に状態を保持する方法

Question

私は検索機能のために2つのコンポーネントを持っています.1つは検索フィルターを選択し、もう1つは検索クエリを行います。フィルタを選択するたびに状態がリロードされるため、複数のフィルタを選択することはできません。検索コンポーネントを呼び出して、検索フィルタコンポーネントの状態を保持する方法はありますか？私searchfiltersコンポーネントで

私はこれがあります。

<SearchFilters searchWithFilters={this.searchWithFilters.bind(this)} /> 

そして、私はこの方法があります：私の検索コンポーネントで

let state = _.extend({}, this.state); 
state.filters = this.toggleFilter(filterObj, state.filters); 
this.setState(state); 
this.props.searchWithFilters(state.filters); 

を私が持っている

searchWithFilters(filters) { 
let state = _.extend({}, this.state); 
state.filters = filters; 
this.setState(state); 
this.props.search(this.state); 
} 

Answer 1

あなたもSearchFiltersの状態を使用するのではなく、フィルタを保存するために、あなたのSearchComponentの状態のみを使用することができます。 toggleFilterメソッドはSearchComponentにもあり、それは小道具としても送信されます（または、常に両方とも一緒に呼び出す場合はsearchWithFiltersでそれを行うことができます）。最後に、フィルタをプロパティとしてSearchFiltersコンポーネントに送信する必要があります。

<SearchFilters filters={this.state.filters} 
searchWithFilters={this.searchWithFilters.bind(this)} /> 

その後、searchWithFiltersは、新しいフィルタを受け取り、SearchComponentの状態にそれを追加します。

searchWithFilters(filterObj) { 
    let state = _.extend({}, this.state); 
    state.filters = []; 
    state.filters.push(this.state.filters); 
    state.filters.push(filterObj); 
    this.setState(state); 
    this.props.search(this.state); 
} 

あなたはまた、それを良い選択にすることができますreduxに格納することができます。

Answer 2

あなただけです毎回フィルタを上書きするので、前のフィルタを追跡する必要がある場合は、それらを配列に格納します。

searchWithFilters(filters) { 
    let state = _.extend({}, this.state); 
    state.filters = []; 
    state.filters.push(filters); 
    this.setState(state); 
    this.props.search(this.state); 
    }