web-dev-qa-db-ja.com

react-select：少なくとも非同期モードで、リストを展開する右側のボタンを削除する方法はありますか？

私はAsyncSelectを使用しており、オプションのリストを表示する右側の矢印ボタンを非表示にしたいと思います。

デフォルトのオプションがある場合に意味があります。しかし、私の場合は何もないので、そのボタンは私の状況には意味がありません。

asyncモードでデフォルトのオプションがない場合、それを削除/非表示にする方法はありますか？

以下はコードです

<AsyncSelect
  placeholder="Search ..."
  cacheOptions
  defaultOptions={false}
  value={this.state.currentValue} // Default to null
  loadOptions={this.fetchOptions}
  onChange={...}
  isClearable
/>

また、コンポーネントがフォーカスを取得したときに空のリストを表示し、少なくとも1つの文字が入力されたときにのみ一致するオプションを表示するという事実を無効にすることもできます。

2つを1つに聞いてすみません。

前もって感謝します。

javascriptreactjsreact-select
9
acmoune

コンポーネントプロパティにDropdownIndicator: () => nullを含めることで、ドロップダウンインジケーターを削除できます

<Select
   components={{ DropdownIndicator:() => null }}
 />
8
rajesh kumar

Rajesh kumarの答えを拡張するには、以下を使用して、ドロップダウンインジケーターとインジケーターセパレーター（選択テキストとドロップダウン矢印の間の水平線）を削除できます。

<Select
    components={{ DropdownIndicator:() => null, IndicatorSeparator:() => null }}
/>
13
shlgug

EDIT：これは古いバージョン用です

反応選択のスタイリングは可能ですが、いくつかのフープをジャンプする必要があります。

スタイルにターゲティングできる自動生成要素がいくつかあります- https://react-select.com/styles#style-object

ターゲットにする要素のスタイルキーを見つけるには、これを見てください https://github.com/JedWatson/react-select/issues/3135#issuecomment-432557568

^実際に何であるかを確認するには、classNameおよびclassNamePrefixをコンポーネントに追加する必要があります。彼らのドキュメントはいくつかの仕事でうまくいくかもしれませんが、私はレポで問題とPRの大きなバックログを見るので、オッズはそれがすぐに発生する可能性が薄いと思います。

次に、説明したようにそのキーのスタイルを設定できます- https://react-select.com/styles#provided-styles-and-state

1
sanjsanj