が反応私は、次の小道具があるオートコンプリートコンポーネント持っ

Question

より再利用可能なコンポーネント：

• value（表示テキスト）を、
• onChange
は、（すべてのキーストロークに解雇）
• onSelect （ユーザーが
  の提案のリストから何かを選択し、選択したオブジェクトを渡し+選択したオブジェクトのテキストを表示すると起動されます - valueと同じ）

状態： - suggestionsList（私はそれがコンポーネントの内部の何かであると判断しました）。

ビューの1つで、このコンポーネントの親は、各キーストロークの後にvalueを気にしません。それはちょうどonSelectハンドラによって渡される選択された項目を気にします。したがって、このシナリオではvalue & onChange小道具は必要ありません。 valueがオートコンプリートコンポーネントの内部状態になる可能性があります。

しかし、他のビューのいずれかで、親は各キーストロークについても知りたいと思います。これは、親が自分の状態でvalueを保持し、それを小道具として渡す必要があることを意味します。 onChange小道具はまた、その状態を変更するために親に通知するために必要である。

オートコンプリートコンポーネントを作成して両方のシナリオを処理するにはどうすればよいですか？どのプロパティが小道具であり、どんな状態であるべきですか？

感謝の意を表します。

Answer 1

2番目のケースでは、現在のvalueについて親が知っている必要がある場合は、変数を保持する必要はありません。したがって、現在のvalue（内部状態変数から）をパラメータとして渡すとonChange prop関数に変更すると、親はそれに応じて変更と更新を認識します。

もう1つの方法は、valueプロパティと内部状態変数を使用することです。私が意味することは、親がvalueを制御したい場合、それが状態エントリーを持ち、それを更新することになります。それ以外の場合は、定数として終了するのでvalueプロパティを提供してはいけません。コンポーネントは提供されるたびにこのプロパティを現在の値として使用し、親はonChangeを使用して保持する値を更新する必要があります。

オートコンプリートコンポーネントのソースコードはmaterial-uiで確認できます。