が反応：record.jsxコンポーネントの1）リスト、または2）単一noResults.jsxコンポーネント：視覚コンポーネント

Question

兄弟で、私は条件付きで2つのオプションのいずれかを表示するレコードのフィルタをやっているのonClickからHTMLのselectタグをリセット。

フィルタ（filter.jsx）はHTML selectタグとしてrecordsHeader.jsxと呼ばれるコンポーネントです。これにはgetRecordsメソッドを呼び出すonChangeイベントがあり、結果のレコードをselectタグのいくつかのオプションに従ってフィルタリングすることができます。

GOAL：私は「すべて」に戻って、フィルタを設定しますnoResults.jsxでボタンを持っていると思います。 問題：getRecordsメソッドを渡すことはできますが、表示されますが、selectタグを 'all'に視覚的にリセットすることはありません。

は、私はjQueryのか、バニラを持つ要素を取得し、働く、それを手動でリセットすることができます知っているが、私は私のために、すべてのDOMものを行うリアクトさせたいと思います。ファイル構造の

地図：

- recordsDashboard.jsx 
    - savedRecordsView.jsx 
    - recordsHeader.jsx 
     - filter.jsx 
    - noResults.jsx <-- click here and visully reset filter.jsx 
    - record.jsx 

Answer 1

コードを見ずに、私はsavedRecordsViewは結果なしの場合には、次のようなものをレンダリングする想像：

<RecordsHeader /> 
<NoResults /> 

savedRecordsViewであることを意味します2つのコンポーネントの「親」を共有します。いくつかの書き換えで、NoResultsにコールバックを渡すことができます。このボタンは、ボタンを使用してフィルタの設定をすべてにトリガーすることができます。

このコールバックは、RecordsHeaderに渡され、その後、それはもともと何から設定「すべて」の適切な再レンダリングすることができますどのフィルタするために小道具を更新します。解決

Answer 2

！私は私の質問でこれを明確にするのに問題がありましたが、select、form、およびtextfieldのようなHTML要素はすべて、React以外の独自の状態を持っています。

私のhandleSelectChangeメソッドとfilterValue変数をselectコンポーネントからsavedRecordsView.jsxに移動して、filter.jsxとnoResults.jsxの両方がそれらを共有できるようにして問題を解決しました。

React docsのこの記事については、controlled componentsについては、私が探していたものとほとんど同じでした。