web-dev-qa-db-ja.com

react-select：インスペクターでスタイリングするときにドロップダウンを開いたままにする方法？

私はreact-selectを使用しており、それをカスタマイズしています。これを行うオプションが見つかりませんでした。ドロップダウンをスタイリングするときにドロップダウンを開いたままにできる回避策はありますか？

reactjsnpmcomponentsreact-select
14
lucasviewup

クロムで、要素>イベントリスナー>「ぼかし」を開き、マウスで「ドキュメント」と書かれた場所の右に移動すると、「削除」ボタンが表示されます>それをクリックします

14
dana2208

V2を使用している場合は、menuIsOpenプロップを使用して、メニューを常に開いたままにできます。

Chromeを使用していて、React開発者ツールプラグインがある場合は、Reactコンソールのタブをクリックし、ブラウザからこのプロパティを手動で切り替えます。V1の場合、isOpen状態を切り替えて同じ動作を実現できます。

6
Andrea Rosales

事前にjsコンソールでwindow.onkeydown = () => {debugger}を実行し、ドロップダウンを展開した後、任意のキーをクリックします

開発者ツールを開いたままにすることが重要です

1
konrad

Googleを使用している場合Chromeデバッグします。選択ドロップダウンにカーソルを合わせて押します Ctrl+Shift+C 同時に、それはデバッグウィンドウで自動的に選択されるべきです

1
Michael D

多分これは役立つかもしれません：

<Select 
   ref={el => (this.selectRef =el)}
   onBlur={() => {
     setTimeout(
       () => 
          this.selectRef.setState({
            menuIsOpen: true,
          }),
        50
     );
   }}
  />
0
Slobodan Krasavčević

Chrome React extension を使用することにより、Selectコンポーネントで「isOpen」（v3：「menuIsOpen」）状態値をtrueに強制できます。

詳細はこちら： https://github.com/JedWatson/react-select/issues/927#issuecomment-31302287

0
ghashi