React-フォーカスを失うカスタム入力を選択

マーティ

選択ドロップダウンとしてreact-selectを使用しています。選択を入力すると、デバウンスされたネットワークリクエストが発生し、ドロップダウンオプションが結果として表示されるように、入力を作成しました。

コードはここにあります:

https://codesandbox.io/embed/nameless-leftpad-o3zwl

基本的に、上記のコードで起こっていることは、反応選択の配列を作成し、追加または削除ボタンがクリックされたときに1つを追加および削除していることです。

カスタム入力を使用しているので、入力DOMノードにコールバック参照を添付して、[選択の追加]ボタンがクリックされたときにオートフォーカスすることができます。

最初の問題はこれです:

  1. アプリの読み込み
  2. 最初の入力をクリックできません

2番目の問題:

  1. アプリの読み込み
  2. 「選択を追加」をクリックします
  3. オートフォーカスは新しい選択に適用されます
  4. 入力を開始し、ネットワーク要求が解決するのを待ちます
  5. 「選択を追加」をクリックします
  6. 以前に入力したものをクリックして選択します
  7. 入力してみてください
  8. 観察-最初の文字の後に入力がフォーカスを失う

そして、これがコールバック参照を完全に使用せずに編集したバージョンです:

https://codesandbox.io/embed/competent-cookies-tkfhc

問題はまだ残っています

  1. 入力を入力してみてください
  2. 1つの文字を入力すると、フォーカスは体に移動します
マーティ

ここでGitHubにリンクされている回答:https//github.com/JedWatson/react-select/issues/3575

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集
0

コメントを追加

0

関連記事

分類Dev

カスタム入力フィールドのReact-Final-Form-Arraysを入力中にフォーカスを失う

分類Dev

Fable.React:フォーカスのある入力テキストを選択します

分類Dev

入力フィールドがReactのフォーカスを失います

分類Dev

文字を入力すると、Reactテキスト入力がフォーカスを失います

分類Dev

フォームデータが小道具としてフォームに渡されると、入力のあるカスタムウィジェットはreact-jsonschema-formでフォーカスを失います

分類Dev

React Hooks-1文字を入力すると、入力のフォーカスが失われます

分類Dev

入力フォーカスにStackoverflow例外を与えるReact-Native

分類Dev

React入力は、各キーストローク後にフォーカスを失います

分類Dev

React JS入力タイプのテキストは、キーストローク後にフォーカスを失います

分類Dev

Reactはクリック後に選択のフォーカスを失います

分類Dev

機能コンポーネントのDatatableでフォーカスを失ったReact入力

分類Dev

react-adminでカスタムフォームを作成する

分類Dev

入力フォーカスでReactの親クラスを変更します

分類Dev

React Nativeでパスワードのカスタムテキスト入力を行う方法は?

分類Dev

React Hooksでオブジェクトの配列を更新しようとすると、入力フォーカスが失われました

分類Dev

React Routingにより、入力のフォーカスが失われます

分類Dev

React ES6const-フォーカスの入力defaultValueをクリア

分類Dev

React ES6const-フォーカスの入力defaultValueをクリア

分類Dev

useRefとreactフックを使用してReactJSのカスタム入力にフォーカスを設定するにはどうすればよいですか?

分類Dev

ReactのFormikでカスタム入力を使用する方法

分類Dev

React-選択がフォーカスされていない場合、選択入力の内容は消えます

分類Dev

Reactでカスタムストライプフォームを作成する

分類Dev

React-Quill:フォーカスを失うことなく、入力中にテキストを動的に置き換え、カーソルを正しい位置に保つ方法

分類Dev

React NativeViewpager内のオートフォーカス入力

分類Dev

React:エスケープキーの入力要素からフォーカスを削除します

分類Dev

React / Redux:入力フィールドでフォーカスが失われます

分類Dev

Reactでカスタム入力タイプファイルボタンを作成する

分類Dev

React-Nativeでカスタムフォントを使用する

分類Dev

React:フォーカスを失うためにReactコンポーネントボタンを取得するにはどうすればよいですか?

Related 関連記事

  1. 1

    カスタム入力フィールドのReact-Final-Form-Arraysを入力中にフォーカスを失う

  2. 2

    Fable.React:フォーカスのある入力テキストを選択します

  3. 3

    入力フィールドがReactのフォーカスを失います

  4. 4

    文字を入力すると、Reactテキスト入力がフォーカスを失います

  5. 5

    フォームデータが小道具としてフォームに渡されると、入力のあるカスタムウィジェットはreact-jsonschema-formでフォーカスを失います

  6. 6

    React Hooks-1文字を入力すると、入力のフォーカスが失われます

  7. 7

    入力フォーカスにStackoverflow例外を与えるReact-Native

  8. 8

    React入力は、各キーストローク後にフォーカスを失います

  9. 9

    React JS入力タイプのテキストは、キーストローク後にフォーカスを失います

  10. 10

    Reactはクリック後に選択のフォーカスを失います

  11. 11

    機能コンポーネントのDatatableでフォーカスを失ったReact入力

  12. 12

    react-adminでカスタムフォームを作成する

  13. 13

    入力フォーカスでReactの親クラスを変更します

  14. 14

    React Nativeでパスワードのカスタムテキスト入力を行う方法は?

  15. 15

    React Hooksでオブジェクトの配列を更新しようとすると、入力フォーカスが失われました

  16. 16

    React Routingにより、入力のフォーカスが失われます

  17. 17

    React ES6const-フォーカスの入力defaultValueをクリア

  18. 18

    React ES6const-フォーカスの入力defaultValueをクリア

  19. 19

    useRefとreactフックを使用してReactJSのカスタム入力にフォーカスを設定するにはどうすればよいですか?

  20. 20

    ReactのFormikでカスタム入力を使用する方法

  21. 21

    React-選択がフォーカスされていない場合、選択入力の内容は消えます

  22. 22

    Reactでカスタムストライプフォームを作成する

  23. 23

    React-Quill:フォーカスを失うことなく、入力中にテキストを動的に置き換え、カーソルを正しい位置に保つ方法

  24. 24

    React NativeViewpager内のオートフォーカス入力

  25. 25

    React:エスケープキーの入力要素からフォーカスを削除します

  26. 26

    React / Redux:入力フィールドでフォーカスが失われます

  27. 27

    Reactでカスタム入力タイプファイルボタンを作成する

  28. 28

    React-Nativeでカスタムフォントを使用する

  29. 29

    React:フォーカスを失うためにReactコンポーネントボタンを取得するにはどうすればよいですか?

ホットタグ

アーカイブ