问题标签 [downshift]

我在使用时遇到了问题Downshift，最初我拥有所有菜单选项，但是一旦我选择了一个选项，下次我点击它时，那将是唯一显示在菜单中的选项。

这是我当前的代码，任何反馈是什么导致的？

我想在我的 antd-mobile web-app 中使用降档的自动完成功能。我喜欢降档，因为它呈现外部组件。

不幸的是，我不知道如何“绑定”来自 antd-mobile 的一/两个文本输入元素之一。这些组件提供了“受控”模式，但我找不到相应的文档。

仅仅传递getInputProps()from downshift 是行不通的：

降档抛出：

当 downshift 读取antd-mobile 组件（calling-back ）event.target.value提供的唯一回调参数（ ）时，就会发生这种情况。这是有道理的，因为 antd-mobile api-doc 说返回文本输入的“字符串”类型值。eventonChange()

那么，如何从 antd-mobile 组件中获取原始的 react<input>组件onChange回调来传递呢？

调查源头：我在这里迷路了。onChange回调应设置为this.props.onChange（包含在 中）restProps。反过来应该getInputProps()从 downshift 设置：返回值的 Object.keys 是：

展望未来：鉴于onChange回调通过降档 - 是否需要更多绑定？

我使用 Downshift 编写了一个可重用的自动完成组件。该组件封装了许多 Relay 逻辑，用于从我的 GraphQL 端点获取数据。我有一个用例，父组件需要接收 selectedItem，显示 selectedItem 的 name 属性，然后清除 autocomplete 的 selectedItem（考虑选择和显示多个标签）。

问题是我似乎无法从父组件控制自动完成的 selectedItem 。我将 selectedItem 作为 null 发送到自动完成，但 inputValue/selectedItem 仍然是所选项目。

为简单起见，去掉了 Relay 的示例代码：

https://codesandbox.io/embed/spring-fire-um1xh

重现步骤

• 在文本框中输入“项目”一词
• 单击显示的三个结果之一

实际结果

• 父组件的标题和自动完成的 inputValue/selectedItem 都设置为所选项目的值

期望的结果

• 父组件的标题设置为所选项目的值
• 自动完成的 inputValue/selectedItem 被清除

我正在使用带有 Material-ui 的 React 和此处记录的自动完成组件 - https://material-ui.com/components/autocomplete/和降档。

使用 onSelect，我可以检索选择的值。我希望能够取回密钥。

在这里，我将 uuid 设置为每个选择的键。

我的最终目标是能够进行选择并检索 uuid 而不是值本身。

虽然我可以使用返回的值来匹配项目列表，但我想确保如果最终有任何重复条目，它不会导致问题。

我的组件完整代码的链接在这里 - https://github.com/theocranmore/bloodbike/blob/master/react_app/src/components/UsersSelect.js#L143

谢谢！

我正在使用 React 开源组件Downshift来构建我的自定义下拉菜单。

我面临的问题是当用户按下键时，Downshift 会清除所选项目（并onChange使用 调用回调）。nullEscape

即使我的下拉菜单甚至没有空选项，这也会清除我的下拉菜单。

如何抑制此行为并使其仅关闭打开的下拉列表（如果已打开）而不更改值。

使用 Downshift，如何实现将 设置为inputValueArrowUp/ArrowDown 上当前突出显示的项目的值，同时保留过滤的项目，直到用户手动增加inputValue？

例如：

使用 Downshift JS 网站上提供的以下沙箱： https ://codesandbox.io/s/simple-downshift-with-getrootprops-example-24s13

当我过滤时，我试图专注于 typeahead 列表中的第一项：

过滤器有效，但是，我不确定如何确保关注与输入最匹配的项目。我希望用户能够输入输入，并且能够在输入时简单地点击“输入”键来选择最顶部过滤的项目（或密切匹配的项目）。我将如何使用 Downshift 包？

我面临Reactjs前端代码库的问题。我们使用库名称react-autoauggest来实现自动完成功能，但领导决定从react-autoauggest 转移到downshift。我通读了这个文档并使用useCombobox钩子实现了这个，但他提出了一些问题并告诉我在没有任何指导的情况下解决这些问题。我创建了这些问题的干净版本。

首先，我正在解决issue-4 清除按钮应该清除输入字段并关闭菜单。但是当我单击清除按钮时，输入字段为空，但菜单仍处于打开状态。你能给我一些关于如何在降档时做这些事情的指导吗？

这是我从对象数组中过滤数据 的代码沙箱链接：在此处查看代码沙箱

应用程序.js：

我正在尝试将 DownShift 中的 useComboBox 与 react-hook-form 一起使用，并且输入的值始终未定义。我从这个开始：https ://codesandbox.io/s/react-hook-form-controller-079xx?file=/src/DonwShift.js

并将 DownShift.js 组件替换为：https ://codesandbox.io/s/usecombobox-usage-1fs67?file=/src/index.js:168-438

除非我提交未定义的值，否则一切正常。设置值时我缺少什么？

我使用 Downshift 中的 useCombobox 作为 use-hook-form 组件，一切正常，除了当用户键入不在传递到 useComboBox 的列表中的值时，我无法获取该值。

除非值在 inputItems 中，否则永远不会触发 onSelectedItemChange。这似乎应该很容易，但我无法从文档中找到答案。