问题标签 [downshift]

我有以下反应组件

只要我不在 getSuggestions() 中执行 axios 请求，自动完成就会像预期的那样工作。只要我不刷新页面，它似乎就会在无限循环中执行请求。任何想法为什么会发生这种奇怪的行为？

这是关于：

https://github.com/paypal/downshift

我将onKeyDown处理程序设置为识别 Tab 键按下，并且我能够highlightedIndex正确获取该值，但是如何使用它来更改inputValue？

我想在降档搜索框组件中获得此功能

<input onfocus="this.select();" onmouseup="return false;" />

这样当用户单击搜索框时，它将选择所有文本

我尝试将其直接添加到输入元素，但它不起作用。Downshift 有一个状态减速器，我尝试在那里添加它，但它也不起作用，或者我做得不对

我猜 stateReducer 是可能的，但我不知道该怎么做

https://github.com/paypal/downshift#statereducer

当我在使用 Downshift 时渲染输入元素时，做错了吗

还是我应该更具体地说明对象中将哪些属性传递给getInputProps？

后者不会让我添加其他属性（例如data-testid:controlName）而不更改我的源代码控制以专门寻找它

当我单击 div 中除提交按钮和输入字段之外的任何内容时，输入字段正在清除输入的输入。我该如何解决？输入的输入应该存在，直到提交发生。我有一个带有如下所示输入字段的 div 以及复选框和提交按钮。复选框和提交按钮没有任何问题。

我一直在尝试围绕 PayPal Downshift 库创建一个 Kotlin JS 包装器，但没有成功。我可以让 Downshift 在 Kotlin 生态系统之外正常工作，但在尝试将其集成到 Kotlin JS 应用程序时却没有运气。

我已将所有属性剥离为以下内容：-

然后在我的 React 应用程序的渲染方法中添加以下内容：-

JSX 中的等价物在自定义组件中工作（尽管什么都不渲染！）

我最终得到的错误如下： -

TypeError：无法读取未定义的属性“$metadata$”

对我来说，这表明无法找到“downshift”包中的类（因此未定义）。如果是这种情况，导入 Downshift 以便 Kotlin 可以使用它的正确方法是什么？

我已经使用 npm 安装了降档模块

它显示在我的 package.json 文件中：-

这是使用 react/jsx 组件时的标准导入

@file:JsModule("downshift")与和@JsName("Downshift")注释匹配。

任何帮助得到这个工作将不胜感激

我正在使用 material-uiTextField为带有downshift的 typeahead 选择器类型组件创建输入和标签。

我看过演示，并且得到了这个：

我的 inputProps 等于：

我的前任在 material-uiInputLabel组件上定义了那些 inputLabelProps 属性，但为了使 aria-labelledby 属性正常工作，我使用了一个TextField.

打印出 input 和 label 道具的内容给出：

我的问题是没有标签呈现给 DOM。我得到的最接近的是一个带有标签属性的 div，它包装了输入，但什么也不显示。

ps 我见过带有标签的 Material-ui 文本字段，但我认为 FloatingLAbelText 不再存在？答案中的链接已过时，并且与 propGetters 模式不兼容。

我有一个需要通过 api 调用显示建议的字段的表单。应该允许用户选择或不选择其中一个选项，并且他们输入的值用于与表单一起提交，但此字段是必需的。我正在使用 Formik 来处理表单，是的用于表单验证以检查是否需要此字段，用于自动完成的降档，以及用于字段的 Material-UI。

当用户决定不使用建议的选项之一和 onBlur 触发器时，就会出现问题。onBlur 总是重置该字段，我相信这是 Downshift 导致了这种行为，但是这个问题的解决方案建议控制 Downshift 的状态，当我尝试它不能很好地与 Formik 和 Yup 一起工作时，我可以解决一些问题' 不是很明白，因为这些组件控制着这个字段的 inputValue。

继承人我到目前为止：

我正在使用 Downshift，以便创建一个显示一些菜单选项的下拉菜单。我用 downshift 创建了一个可重用的 React 组件，但现在我收到了这个错误：

这是此错误所指的代码：

我在我的主屏幕组件中使用它，如下所示：

预期行为： 呈现菜单项列表及其相应的图标。

当前行为： 我收到上述错误。我不确定这段代码有什么问题。在我看来，这是正确的。

如果您愿意，我可以发布整个组件，请告诉我。

更新，整个下拉组件：

我试图调整这个降档示例( other-examples/react-window) 以使用 material-ui 组件。

我在本地环境中尝试了几个选项，但是在使用键盘滚动或导航结果时会破坏渲染。我在这里分叉了代码框。我修改的唯一代码是函数，通过orItemRenderer更改原始代码，但结果是相同的。我还调整了 FixedSizeList以匹配 material-ui 组件的高度，但它没有解决任何问题。ItemListItemMenuItemitemSize46

我不太明白为什么material-ui 列表示例与react-window一起使用，但它与downshift一起使用。

任何帮助，将不胜感激 ：）

使用的版本：