親または子コンポーネントの反応状態

Question

Reactを使用して先読み入力を行いました。私は自分の状態を配置する場所を入力したいと思います。私はリアクト使用しています 、およびないReduxのか、何を持っているあなたは私のルートコンポーネントを のようないくつかのアーキテクチャでは、次のようになります。

は

import React, { Component } from 'react'; 
import InputSearch from './input_search'; 
import SearchHints from './search_hints'; 

class Main extends Component { 
    constructor(props) { 
    super(props) 
    this.state = 
     /* Some state here? */ 
    } 
    } 

    render() { 
    return (
     <InputSearch /> 
     <SearchHints /> 
    ); 
    } 
} 

InputSearchは明らかに<input />マークアップの世話をし、SearchHintsは、リストをレンダリングするの面倒を見ますユーザーの種類などの提案の

私の質問は、私は、ルートコンポーネントで私の状態を維持し、または状態はいくつかのデータ配列にユーザの入力を一致させるためのロジックが含まれています別の子コンポーネント に置く必要があるかどうかではありません検索提案、および値fを更新するロジック選択した検索ヒントを入力フィールドに入力します。私は、2つの子コンポーネント間の論理が混ざり合っているように感じるので、どこに配置するのかわかりません。

Answer 1

アプリのフローがルートコンポーネントを中心に回転するため、常にルートコンポーネントに状態を維持する必要があります。したがって、それに従ってコンポーネントを計画する必要があります。

あなたのアプリのルート状態を維持することが難しく、またサブコンポーネントもローカル状態を維持する必要があると思われる場合は、ストア（flux、redux）を使用する必要があります。

あなたの状態をルートに保つという問題のステートメントを見ることは、あなたの状態を子コンポーネントに渡し、子コンポーネントで実行したい計算を行うだけで簡単な解決策になります。コードをもっと複雑にする。これはちょうどあなたが今、何にあなたを計算するメインルートコンポーネント

function:setInputAsState(input) 
{ 
this.setState({ 


input:input 
]) 

} 
<inputsearch setInput={this.setInputAsState}/> 
<SearchHints state={this.state.input}/> 

で

function:method(event) 
{ 

this.props.setInput(event) 


} 
<input type="text" onChange={this.setInput}/> 

を行うことができ、あなたのinputsearchコンポーネントで何か

{input:""} 

のようなあなたの状態を設定し達成するために

SearchHintsコンポーネントに必要です。 あなたはアイデアを持っていますか？

Answer 2

あなたのルートコンポーネントには、ユーザーが既に入力したものと最後の提案データが表示されます。私はまた、これらの国家メンバーを子供たちに渡すでしょう。

私はこのようなものとなるだろう：最初のケースで

this.state = { 
    text: "", 
} 

... 

<InputSearch value={this.state.text} /> 

// 1st case: 
<SearchHints query={this.state.text} /> 

// 2nd case: 
<SearchHints hints={arrayOfSuggestions} /> 

// 3rd case: 
<SearchHints> 
    <Hint someProps /> 
    <Hint someProps /> 
    <Hint someProps /> 
</SearchHints> 

、あなたの要素SearchHintsは提案を探します。

そうでない場合は、それに小道具の配列または提案付きの子配列を渡す必要があります。