Downshift.js 作為列表過濾器

[英]Downshift.js as a list filter

我只是想嘗試看看如何將 Downshift 用作列表過濾器，即“下拉”菜單不會關閉。 我發現這很容易，但后來發現很難克服默認行為，即當您單擊一個項目時， 輸入會填充它的值。 我已經創建了一個示例來說明我將如何解決這個問題（見下文），但它看起來很復雜。 理想情況下，我希望只在點擊處理程序上做一個防止默 ...

僅顯示一個屬性，但保存整個 object（React Final Form + Downshift）

[英]Show only an attribute, but save entire object (React Final Form + Downshift)

這個問題可能已經解決了，但我發現的例子對我沒有多大幫助。 降檔版本：6.1.0 節點版本：14.15.4 npm 版本：6.14.10 反應版本：17.0.1 你做了什么：試圖在輸入字段上顯示 object 屬性，但我想保存整個 object 發生了什么： object 保存得很好，但我不能在輸 ...

如何在 reactjs 中使用降檔設置輸入值

[英]How to set input value using downshift in reactjs

我正在使用 downshiftjs 創建自動完成輸入文本框。 單擊自動完成的結果時，我無法設置輸入文本。 我正在創建示例代碼codesandbox.io 自動完成功能正在運行： 它是可搜索的： 點擊item時，無法用點擊的item設置輸入框值。 ...

將對象數組傳遞給 useHook(downshift-js) 會產生錯誤

[英]Passing array of objects to useHook(downshift-js) creates error

我遵循了 downshift-examples 中的基本用法，但將下拉列表中顯示的項目數組從 starwars（字符串數組）更改為 shared.js 中的對象數組（例如 Id: 1, Description:'item'） . 我還記錄了一些事情，並將它們內聯在下面的代碼中，並以“==>” ...

使用 HTMLFormElement.reset() 和 Downshift 和 react-hook-form

[英]Using HTMLFormElement.reset() with Downshift and react-hook-form

我正在使用 DownshiftJS 使用useCombobox掛鈎創建自動完成組件。 一切順利，並使用react-hook-form進行測試。 不幸的是，我遇到了一個問題，即react-hook-form可用的 reset 函數會觸發HTMLFormElement.reset()方法，但不會觸發 D ...

允許 Downshift 使用 Combobox 到 select 不在列表中的項目

[英]Allow Downshift useCombobox to select items not in the list

我使用 Downshift 中的 useCombobox 作為 use-hook-form 組件，一切正常，除了當用戶鍵入不在傳遞到 useComboBox 的列表中的值時，我無法獲取該值。 除非值在 inputItems 中，否則永遠不會觸發 onSelectedItemChange。 這似乎應該 ...

使用 DownShift 中的 useComboBox 和 react-hook-form

[英]Using useComboBox from DownShift with react-hook-form

我正在嘗試將 DownShift 中的 useComboBox 與 react-hook-form 一起使用，並且輸入的值始終未定義。 我從這個開始： https://codesandbox.io/s/react-hook-form-controller-079xx?file=/src/DonwS ...

Downshift：菜單應關閉，直到未找到結果

[英]Downshift: The menu should close until results not found

我遇到了Reactjs前端代碼庫的問題。 我們使用庫名稱react-autoauggest來實現自動完成功能，但領導決定從react-autoauggest 轉移到downshift 。 我通讀了這個文檔並使用useCombobox鈎子實現了這個，但他提出了一些問題並告訴我在沒有任何指導的情況下解決 ...

Downshift：將 inputValue 設置為鍵盤導航上當前突出顯示的項目的值

[英]Downshift: Set inputValue to value of currently highlighted item on keyboard navigation

使用 Downshift，如何實現將inputValue設置為 ArrowUp/ArrowDown 上當前突出顯示的項目的值，同時保留過濾的項目，直到用戶手動增加inputValue ？ 例如： ...

React-Downshift - 如何防止通過 Escape 鍵清除？

[英]React-Downshift - How to prevent clear by Escape key?

我正在使用 React 開源組件Downshift來構建我的自定義下拉菜單。 我面臨的問題是當用戶按下Escape鍵時，Downshift 會清除所選項目（並使用null調用onChange回調）。 即使我的下拉菜單甚至沒有空選項，這也會清除我的下拉菜單。 如何抑制此行為並使其僅關閉打開的下拉列表 ...

在 onSelect 處從 material-ui 自動完成檢索條目的鍵，而不是值

[英]Retrieving the key for the entry from material-ui autocomplete at onSelect, instead of value

我正在使用帶有 Material-ui 的 React 和此處記錄的自動完成組件 - https://material-ui.com/components/autocomplete/和降檔。 使用 onSelect，我可以檢索選擇的值。 我希望能夠取回密鑰。 在這里，我將 uuid 設置為每個選擇的 ...

無法使用受控道具從父組件控制 Downshift selectedItem 道具

[英]Can't control Downshift selectedItem prop from parent component using controlled props

我使用 Downshift 編寫了一個可重用的自動完成組件。 該組件封裝了許多 Relay 邏輯，用於從我的 GraphQL 端點獲取數據。 我有一個用例，父組件需要接收 selectedItem，顯示 selectedItem 的 name 屬性，然后清除 autocomplete 的 selec ...

Reactjs中的降檔 - 菜單下拉列表僅顯示所選項目

[英]Downshift in Reactjs - Menu dropdown only displaying selected item

我在使用Downshift遇到了麻煩，最初我有所有的菜單選項，但是一旦我選擇了一個選項，那就是下次我點擊它時菜單中顯示的唯一選項。 這是我目前的代碼，有什么反饋是什么造成的？ ...

Downshift + react-window + material-ui

[英]Downshift + react-window + material-ui

編輯：我強烈建議使用新的自動完成功能，它有很多選項並且效果很好，而不是手動集成 Downshift。 我試圖調整這個降檔示例（ other-examples/react-window ）以使用 material-ui 組件。 我在本地環境中嘗試了幾個選項，但是在使用鍵盤滾動或導航結果時會破 ...

反應| Items.map不是函數

[英]React | Items.map is not a function

我正在使用Downshift，以創建顯示某些菜單選項的下拉菜單。 我用降檔創建了一個可重用的React組件，但是現在出現了這個錯誤： 這是此錯誤引用的代碼： 我在這樣的主屏幕組件中使用它： 預期的行為：呈現菜單項及其相應圖標的列表。 當前行為：我收到上述錯誤。 ...

使用Formik降檔自動完成onBlur重置值

[英]Downshift autocomplete onBlur resetting value with Formik

我有一個表單，其中的字段需要通過api調用顯示建議。 應該允許用戶選擇這些選項之一，也可以選擇鍵入的值與表單一起提交，但是此字段是必需的。 我正在使用Formik處理表單，使用Yup進行表單驗證以檢查是否需要此字段，使用下移進行自動完成，並使用Material-UI進行處理。 當用戶決 ...

使用material-ui的TextField和getInputProps在輸入旁邊創建標簽

[英]Creating a label alongside an input using material-ui's TextField and getInputProps

我正在使用material-ui TextField為帶有downshift的提前輸入選擇器類型組件創建輸入和標簽。 我看過演示 ，並具有以下功能： 我的inputProps等於： 我的前任曾在material-ui InputLabel組件上定義了那些inputLabel ...

在Paypal Downshift周圍創建Kotlin React Wrapper

[英]Creating a Kotlin React Wrapper around Paypal Downshift

我一直在努力創建一個圍繞PayPal Downshift庫的Kotlin JS包裝器。 我可以讓Downshift在Kotlin生態系統之外正常工作，但在嘗試將它集成到Kotlin JS應用程序中時沒有運氣。 我已將所有屬性剝離到以下內容： - 然后在我的React應用程序的渲 ...

當單擊div而非提交和輸入字段時，輸入字段（使用降檔）正在清除輸入的數據

[英]Input field (using downshift) is clearing the entered data when click on div other than submit and input field

當我單擊div中除提交按鈕和輸入字段以外的任何內容時，輸入字段將清除輸入的輸入。 我該如何解決？ 輸入的輸入應該一直存在，直到提交提交。 我有一個div，其輸入字段如下所示，並帶有復選框和“提交”按鈕。 復選框和提交按鈕沒有錯。 ...

降檔中的getInputProps

[英]getInputProps in Downshift

當我在使用Downshift時渲染輸入元素時，這樣做是錯誤的 還是我應該更具體地將對象中的哪些屬性傳遞給getInputProps？ 然后，后者將不允許我添加其他屬性（例如data-testid:controlName ），而無需更改源控件以專門查找它 ...