问题标签 [downshift]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
javascript - 将 HTMLFormElement.reset() 与 Downshift 和 react-hook-form 一起使用
我正在使用 DownshiftJS 使用useCombobox钩子创建一个自动完成组件。一切顺利，并通过react-hook-form. 不幸的是，我遇到了一个问题react-hook-form，其中触发该HTMLFormElement.reset()方法的 reset 函数不会触发 Downshift 组件中的任何状态/输入更改。
这意味着当用户从列表中选择一个项目（这会触发 中的事件Autocomplete），单击重置按钮，然后再次单击输入时，列表将被过滤为仅先前选择的项目。这是因为所选项目存储在selectedItem内部状态中。
如何获取重置方法以触发Autocomplete组件内的更改并清除selectedItem状态？
我已经在这里隔离了这个问题。
reactjs - 将对象数组传递给 useHook(downshift-js) 会产生错误
我遵循了 downshift-examples 中的基本用法，但是将要显示在下拉列表中的项目数组从 starwars（字符串数组）更改为 shared.js 中的对象数组（例如 Id: 1，Description:'item'） .
我还记录了一些东西并将它们内联在下面的代码中，前面加上“==>”。
当我启动应用程序时，会出现下拉菜单。但是，当我单击下拉列表右侧的下拉箭头时，会显示以下错误。
未捕获的错误：对象作为 React 子项无效（找到：带有键 {Id，Description} 的对象）。如果您打算渲染一组子项，请改用数组。
关于我做错了什么的任何想法？
javascript - 如何在reactjs中使用downshift设置输入值
我正在使用 downshiftjs 创建自动完成输入文本框。单击自动完成的结果时，我无法设置输入文本。
我正在创建示例代码 codesandbox.io
自动完成功能正在运行：
它是可搜索的：
点击item时，无法用点击的item设置输入框值。
material-ui - Lighthouse Aria-Label 错误——如何纠正？
我的应用使用 Material-UI 和 Downshift。Chrome Lighthouse 要求我在这两个元素中添加 aria 标签：
我的代码没有指定这些 Aria 标签，所以我认为它们一定是由 Material-UI 或 Downshift 生成的。
所以，两个问题：
- 这是 Material-UI 异常还是 Downshift 异常？
- 纠正它的最佳实践方法是什么？
javascript - 仅显示一个属性，但保存整个对象（React Final Form + Downshift）
这个问题可能已经解决了，但我发现的例子对我没有多大帮助。
- 降档版本：6.1.0
- 节点版本：14.15.4
- npm 版本：6.14.10
- 反应版本：17.0.1
你做了什么： 试图在输入字段上显示一个对象属性，但我想保存整个对象
发生了什么： 对象保存得很好，但我不能在输入中只显示一个属性
谢谢！
reactjs - 如何在输入更改时将建议值获取到下拉列表，然后使用 React Downshift 的 useCombobox 获取值？
我的 Google Books 克隆应用程序有一个用户提交他们输入的内容query，然后显示响应data。
我想实现Downshift的搜索自动完成功能，以便作为他们的user类型query，列出与他们当前匹配的建议的下拉列表query。单击下拉建议列表中的列表项应更新输入查询，然后获取该data查询query。我希望有与Google 图书相同的行为
文档中示例中的数据Downshift是硬编码的。就我而言，data在fetch.
我想我需要创建一个建议对象并定义useCombobox逻辑以获取每个输入更改的建议。然后分配handleBookFetch给下拉列表的项目' onClick。通过这次尝试，我收到了TypeErrorCannot read property 'length' of undefined.
我在试图弄清楚如何在我的实例中使用它时遇到了麻烦。当用户在输入中键入查询时，如何获取建议，然后使用单击的建议更新查询值并获取单击的建议的查询？代码沙盒
node.js - 降档自动完成不使用 nextjs 在生产中呈现
我们有一个 SPA，我们正在从 CRA 迁移到 next.js。到目前为止，大多数事情都很顺利。我们需要构建一个自动完成搜索栏，因此我们从 MUI v5 开始Autocomplete，它在开发中完美运行，但是当我们将其部署为静态 html/css 时，生产中提供的应用程序不会显示搜索结果。
最初的假设是它是 MUI v5 的怪癖，所以我们切换到使用 Paper 降档以显示自动完成结果，但不幸的是，我们仍然遇到相同的问题，即没有渲染，但只是在部署中。在本地，一切都完美无缺
这是组件在降档时的外观：
nextjs 导出生成的静态文件由运行在 k8s 集群中的 nodejs 服务器提供服务。
关于可能发生的事情有什么想法吗？
reactjs - setProduct 钩子不是函数吗？
我不断收到一条错误消息，说 setProduct 值不是我的反应代码中的函数。这是我一直在研究的代码框示例。
reactjs - Downshift.js 作为列表过滤器
我只是想看看如何将 Downshift 用作列表过滤器，即“下拉”菜单不会关闭。
我发现这相当容易，但后来发现很难克服默认行为，即当您单击一个项目时，输入会填充它的 value。
我已经创建了一个如何解决这个问题的示例（见下文），但它似乎很复杂。理想情况下，我希望在点击处理程序上做一个阻止默认类型的事情并提供我自己的，但我没有看到明显的方法。Downshift推荐的方式是什么？
我从覆盖点击行为开始，但后来发现我还需要做模糊和其他操作，而且我不想错过边缘情况。