web-dev-qa-db-ja.com

React-Hook-Formを使ってFreesoloモードで素材UIオートコンプリートを使用

私は無料のソロモードでマテリアルUIのオートコンプリートをコンボ入力の一種として使用しようとしています。ユーザーはオートコンプリートを介して推奨オプションを選択できるか、または利用可能な場合は、入力値を最終フォーム値として使用する必要があります。

問題：

ケース1：オートコンプリートは、選択可能なオプションを作成して送信されますが、入力にカスタム値がある場合は送信されません。

https://codesandbox.io/s/autocomplete-free-solo-case---i7kin?file=/demo.js

ケース2：オートコンプリートから選択されたオプションとカスタム入力値が送信されますが、オートコンプリートドロップダウンはもう推奨を表示しませんが、むしろ入力が選択された時間を開く

https://codesandbox.io/s/autocomplete-free-solo-case----uk9db?file=/demo.js

私のオートコンプリートリストにはいくつかのオプションがあるため、私はケース2と暮らすことができました。

reactjsmaterial-uireact-hook-form
3
Christoph Hörmann

freeSoloを使用していますが、autoSelectオプションを追加していないため、コードの問題はinputを失うときの問題です - 値は依然として古いもの。ここでの理由は、制御されたコンポーネントを使用しているが、コントローラはReact-Hook - フォームです。

ここに2つのオプションを持つことができます。

  1. autoSelectを追加して、ユーザーが入力に焦点を合わせる場合でも - 現在の値はオートコンプリートの値になります。
  2. 現在持っている値を保存するために、ユーザーがenterを押すように要求します。 （clearOnBlurオプションを使用できます）。

これが最初のオプションの実装です。

<Autocomplete
  id="autocomplete"
  freeSolo
  autoSelect
  options={["option1", "option2", "another option"]}
  renderInput={params => (
    <TextField
      {...params}
      label="freeSolo"
      margin="normal"
      variant="outlined"
    />
  )}
/>
 _

そして、実行された例（あなたのCodesAndboxに基づく）: https://codesand.io/s/autocomplete-freesolo-with-auto-value-on-blur-e2smn?file=/demo.js

5
Dekel