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

マットホランド

私はしばらくの間react-selectをうまく使っていますCreatableが、コンポーネントのバージョンに関して問題があります。

これが私のコードです:

const options = [
  {
    label: 'One',
    value: 'One'
  },
  {
    label: 'Two',
    value: 'Two'
  },
  {
    label: 'Three',
    value: 'Three'
  },
  {
    label: 'Four',
    value: 'Four'
  }
];

const selectedItems = [
  {
    label: 'One',
    value: 'One'
  }
];

const App = () => (
  <div style={styles}>
    <Select.Creatable
      backspaceRemoves={true}
      multi
      openOnFocus={false}
      openOnClick={false}
      onSelectResetsInput={false}
      onBlurResetsInput={false}
      onCloseResetsInput={false}
      arrowRenderer={() => null}
      clearRenderer={() => null}
      options={options}
      value={selectedItems} />
  </div>
);

私はこれの実行可能なバージョンもここで作成しました:https//codesandbox.io/s/q27lnon96

サンドボックスページにアクセスするとわかるように、ユーザーがクリックすると、選択に入力されたテキストはすべて消えます。選択に再びフォーカスが与えられると、再表示されます。

これが行動のGIF記録です

明確にするために、私の質問は入力に入力されたテキスト「two」についてです-それは選択された値の問題ではありません(正しい状態とコールバックが構成されている場合、これらは正常に機能します)。

どうすればreact-selectに入力の内容を保存させることができますか?内部的に値を記憶しているように見えますが、フォーカスがなくなったときにテキスト入力を非表示にします。さまざまなonFooResetsInputすべてをfalseに設定することでこれを達成できると思いましたが、うまくいきませんでした。

私のアプリケーションは、この入力に入力されたテキストの値を使用してUIの他の要素に影響を与えているため、テキストが非表示になっていると同期していないように見えます。

  • react-selectバージョン:1.2.1(最新)
  • reactおよびreact-domバージョン:15または16(どちらもこの動作を示します)
ヨンジ

onChangeイベントを処理し、selectedItemsをコンポーネント状態の一部にする必要があります。あなたの場合、selectedItemsは決して変更されません。

https://codesandbox.io/s/pyo17y6qv7を見てください

編集

はい、inputRendererで動作します。関数のデフォルト引数は値を入力に渡します(これが、onBlurの場合、値 ''が入力に渡されるため、入力値が消える理由です。onBlurResetsInputフラグがfalseであるため、react-selectのバグの可能性があります)。自分の入力に渡す前に削除する必要があります。https://codesandbox.io/s/54on0mr984の更新されたコード

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

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

編集
0

コメントを追加

0

関連記事

分類Dev

プリプロセッサが選択されていない場合でも、このReactコードはCodePenでどのように機能しますか?

分類Dev

React-Bootstrap-Typeahead-メニュー項目が選択されていない場合のENTERキーの処理

分類Dev

React-ユーザーの検索値と一致するオプションがない場合はデフォルト値を選択します

分類Dev

すべての入力が選択/フォーカスされていない場合

分類Dev

React Slateでのテキスト選択は、フォーカスがReact Selectに変わったときにマークされなくなりました

分類Dev

選択した値がreact-selectの入力バーに表示されないようにするにはどうすればよいですか?

分類Dev

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

分類Dev

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

分類Dev

Reactで値の長さが0の場合、入力フィールドは消えます

分類Dev

react-select-カスケード選択MultiValueがクリアされない

分類Dev

reactを使用して選択メニューからオプションを選択すると、変数secondMenuが更新されないのはなぜですか?

分類Dev

フォーム選択入力が選択されていない場合のjQueryアラート

分類Dev

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

分類Dev

react-selectで同じオプションが選択されている場合はonChangeをトリガーしない

分類Dev

React Nativeは、入力がフォーカスされている間、条件付きでビューの一部をレンダリングします

分類Dev

すべての入力フィールドが入力されていない場合は、React機能コンポーネントの送信ボタンを無効にします

分類Dev

メニューリストのどの項目がMaterialUI Reactで選択されているかを表示するにはどうすればよいですか?

分類Dev

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

分類Dev

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

分類Dev

REACT.JS-選択/オプションが表示されないはずです

分類Dev

React-select multi select値が選択されていないときに、小道具を更新します

分類Dev

React-ローカルの.jsonファイルのデータを使用して別の選択メニューの値に基づいて1つの選択メニューにデータを入力する方法

分類Dev

入力するすべての文字のテキストを再選択せずに、ReactコンポーネントでonBlurとonFocusを組み合わせるにはどうすればよいですか?

分類Dev

React-オプションが表示されないため、ユーザーが入力したエントリを操作するには{creatable}を選択します

分類Dev

「選択」または「入力」のいずれかが必要な場合のフォームの検証

分類Dev

ページネーションが制御されたreact-tableを使用して他のページにいる場合でも、選択したすべての行を削除します

分類Dev

react-adminのReferenceInputフィールドの選択肢のテキストをフォーマットするにはどうすればよいですか?

分類Dev

React:選択したオプションに基づいてテキスト入力を追加/変更します

分類Dev

Reactフォーム:入力データが表示されない

Related 関連記事

  1. 1

    プリプロセッサが選択されていない場合でも、このReactコードはCodePenでどのように機能しますか?

  2. 2

    React-Bootstrap-Typeahead-メニュー項目が選択されていない場合のENTERキーの処理

  3. 3

    React-ユーザーの検索値と一致するオプションがない場合はデフォルト値を選択します

  4. 4

    すべての入力が選択/フォーカスされていない場合

  5. 5

    React Slateでのテキスト選択は、フォーカスがReact Selectに変わったときにマークされなくなりました

  6. 6

    選択した値がreact-selectの入力バーに表示されないようにするにはどうすればよいですか?

  7. 7

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

  8. 8

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

  9. 9

    Reactで値の長さが0の場合、入力フィールドは消えます

  10. 10

    react-select-カスケード選択MultiValueがクリアされない

  11. 11

    reactを使用して選択メニューからオプションを選択すると、変数secondMenuが更新されないのはなぜですか?

  12. 12

    フォーム選択入力が選択されていない場合のjQueryアラート

  13. 13

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

  14. 14

    react-selectで同じオプションが選択されている場合はonChangeをトリガーしない

  15. 15

    React Nativeは、入力がフォーカスされている間、条件付きでビューの一部をレンダリングします

  16. 16

    すべての入力フィールドが入力されていない場合は、React機能コンポーネントの送信ボタンを無効にします

  17. 17

    メニューリストのどの項目がMaterialUI Reactで選択されているかを表示するにはどうすればよいですか?

  18. 18

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

  19. 19

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

  20. 20

    REACT.JS-選択/オプションが表示されないはずです

  21. 21

    React-select multi select値が選択されていないときに、小道具を更新します

  22. 22

    React-ローカルの.jsonファイルのデータを使用して別の選択メニューの値に基づいて1つの選択メニューにデータを入力する方法

  23. 23

    入力するすべての文字のテキストを再選択せずに、ReactコンポーネントでonBlurとonFocusを組み合わせるにはどうすればよいですか?

  24. 24

    React-オプションが表示されないため、ユーザーが入力したエントリを操作するには{creatable}を選択します

  25. 25

    「選択」または「入力」のいずれかが必要な場合のフォームの検証

  26. 26

    ページネーションが制御されたreact-tableを使用して他のページにいる場合でも、選択したすべての行を削除します

  27. 27

    react-adminのReferenceInputフィールドの選択肢のテキストをフォーマットするにはどうすればよいですか?

  28. 28

    React:選択したオプションに基づいてテキスト入力を追加/変更します

  29. 29

    Reactフォーム:入力データが表示されない

ホットタグ

アーカイブ