問題タブ [react-select]

es5 を使用して非同期オプションでこのコンポーネントを使用しようとしています。私の componentDidmount には、コールバックを使用して学校の配列を設定するサービス呼び出しがあります。

学校リストを州の配列に設定します

サービス：

ドキュメントの例を使用してこれを設定するにはどうすればよいですか? このような非同期バージョンのサービス呼び出しをどこに置き、オプション リストを生成しますか?

MY コンポーネントは次を使用してレンダリングされます。

次のエラーが表示されます。

Uncaught Invariant Violation: 要素の型が無効です: 文字列 (組み込みコンポーネントの場合) またはクラス/関数 (複合コンポーネントの場合) が必要ですが、得られたのは未定義です。のレンダリング方法を確認してくださいTableModalComponent。

私のページの上部にあります：

https://github.com/kriasoft/react-starter-kitに基づいたユニバーサル React アプリケーションがあります。

コンポーネントの 1 つで、react-select を実装しようとしていますhttps://github.com/JedWatson/react-select

サンプル ディレクトリから CSS ファイルに CSS をコピーして貼り付けました。ここで何が欠けているのかわかりません。

'./Modal.scss'; github の例から直接コピーされたスタイルシートです。

開発ツールを見ると、そのフィールドに適用されている css オプションはありません。

私はreact-selectをGrommetと組み合わせており、次のように Grommet FormField コンポーネント内で選択を行います。

小さい画面では問題なく動作します:

ただし、より大きな画面では、選択したコンテンツは親 (FormField) コンテナー内でスクロール可能です。

オフに切り替えるposition: absoluteと、選択したコンテンツがコンテナーの外側に表示されますが、フォーム全体のサイズが変更されます。

他に何をチェックまたは試すかについてのアイデアはありますか?

私の意図は、react-select を使用して複数選択コンポーネントを作成することです。react-select の小さな問題を回避できません。フラックスストアに入れるには、次のものが必要です。

1. ユーザーによってすでに選択されている値。これはvalueArrayプロパティを介して渡されます
2. 選択リストに取り込まれる値。これはoptionsプロパティを介して渡されます

ユーザーが入力ボックスに何かを入力すると、この入力値がonInputChangeフックを使用してキャプチャされ、これによりフラックス アクションが発生します。このアクションは、値の新しいリストを格納してストアを更新し、changeイベントを発行します。ここでの問題は、changeイベントが発行されると、コンポーネントが選択された値と新しいオプション セットで再レンダリングされることです。これが発生すると、ユーザーがフィルター オプションに入力していた値が失われます ( としてvalueArray) が再レンダリングされます。オプションのフェッチをフラックスストアの外に移動せずに、フィルタテキストをreact-selectに保持する方法はありますか?

react-selectで html タグのサポートを有効にできるかどうか疑問に思っています。

プロミスコールバック関数を使用して提案のリストを挿入<em>し、結果にタグを追加しました..

しかし、react-select にそれを html タグと見なすように指示する方法はありません。

どうやってするか ？

選択した値を入力ボックスのすぐ下に表示するにはどうすればよいですか。

使用事例：

react-select の複数選択を使用しています。選択ボックスから値を選択すると、選択されたように入力ボックス内に表示されます。入力ボックスの外側（そのすぐ下）で選択した値を取得するためのメソッドまたは何かを用意できますか

前もって感謝します！

私のフォームの 1 つで ReactSelect を使用しています。

カスタムをレンダリングしたいoptionsComponent:

exampleを見ると、カスタム コンポーネントをレンダリングできるので、次のことをテストしました。

<span>Testing Text</span>これは、すべての子の前にレンダリングする必要があります。そうではありません。私は何を間違っていますか？

私の最終目標は、オプションに次のようなさまざまなデータを表示させることです。

React-Select を使用しています。

現在、elasticsearch からデータをフェッチし、次の状態に設定しています。

後でthis.state.titleResults、それを使用して React-Select コンポーネントに渡します。

これはうまくいきます。しかし今、ユーザーが React-Select componentOptions を検索するときに、このタイトルに関連する追加のメタ データを渡したいと思います。このようなもの：

のみを渡して{value: obj._source.title_id, label: obj._source.title_name}いますが、コンポーネントで使用されるより多くの情報を渡したいと思いDropdownOptionます:

このコンポーネントにより多くの情報をどのように渡しますか?