反応成分に情報をどのように保存するか。

Question

私はこの質問をしているとき、多くの疑念が私の心に入ってきています。まず、問題の説明をします。

コンポーネントXがあり、チェックボックスと検索ボックスがあります。

何かが入力された一方では、検索ボックスにSEARCH_QUERYに一致するチェックボックスを更新するために必要な Xを（SEARCH_QUERYそれを呼び出します）。 [私はいくつかのAPIコールによってチェックボックスのすべての値を得たことに注意してください。コンポーネントが作成されたときに実行されます。 ]私は私の心に来た

まず疑問は、値がより検索している場合、コンポーネントの状態

で

1. 店（SEARCH_QUERY）と（チェックボックスの値が）より多くの時間を要するということです。

2. それは成分

内部小道具の値を変更することが可能であるか、またはそれを行うための他の方法があります？

Answer 1

コードは共有されないため、普通のReact（Reduxなし、ミドルウェアが使用されている）を使用していると仮定します。

あなたの質問に答える：

[1]それはコンポーネント内小道具の値を変更することは可能ですか？

コンポーネント内の小道具の値を変更するのは悪い方法です。

"すべての反応コンポーネントは、その小道具に関して純粋な機能のように動作しなければなりません。"

[参考文献：小道具値はコンポーネント内で変更された場合はhttps://facebook.github.io/react/docs/components-and-props.html#props-are-read-only]

また、ビューが更新を取得しません。

[2]またはそれを行う他の方法があります。

はい（コンポーネント内に変異がない） "state"プロパティを使用して値を保持するために&のsetStateを使用して値を更新する。

[3]どのように反応成分に情報を保存するのですか？

コンポーネントXの名前をFilterDataに変更します。 searchbox（SearchBox）&チェックボックス（SelectionBox）は2つの個別コンポーネントです。

// Define state to FilterData 
class FilterData extends React.Component { 
    constructor() { 
    super() 
    this.state = { 
     term: '', 
     searchResults: [] 
    } 
    } 
    .... 
} 

// pass the state values to child components as props 
class FilterData extends React.Component { 
    .... 
render() { 
return (
     <div> 
     <SearchBox term={this.state.term} /> 
     <SelectionBox options={this.state.searchResults} /> 
     </div> 
    ) 
} 
} 

でアプリを反応させ、 データ（一方向）トップを流下し、真実の単一のソースが存在すべきです。

サーチ&選択ボックスを2つの個別（兄弟）コンポーネントであるユーザが入力サーチが変更イベントや火災のAJAXを検出するために、その状態や可能性を更新し、取得します入ると、 サーチの状態が（検索文字列を持っている）用語 を持っています応答。

SelectionBoxがどのようにして起こった検索、どのようにデータを取得できるかを検出する方法。 これは、状態が共通祖先FilterDataに移動される理由です。

[参照：https://facebook.github.io/react/docs/lifting-state-up.html]

[参照：https://facebook.github.io/react/docs/state-and-lifecycle.html#the-data-flows-down]

コードサンプル---------------------------- -------------------------

選択された値は保存されません。 https://codepen.io/sudhnk/pen/NgWgqe?editors=1010

選択された値が保存されます。 https://codepen.io/sudhnk/pen/JJjyZw?editors=1010