Downshift：将 inputValue 设置为键盘导航上当前突出显示的项目的值

Question

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

例如：

Answer 1

上述行为可以利用stateReduceranduseCombobox钩子实现，如下所示：import React, { useState } from "react";import { render } from "react-dom";import { useCombobox } from "downshift";import { items, menuStyles } from "./utils";function stateReducer(state, actionAndChanges) {&nbsp; switch (actionAndChanges.type) {&nbsp; &nbsp; case useCombobox.stateChangeTypes.InputChange:&nbsp; &nbsp; &nbsp; return {&nbsp; &nbsp; &nbsp; &nbsp; ...actionAndChanges.changes,&nbsp; &nbsp; &nbsp; &nbsp; userInput: actionAndChanges.changes.inputValue&nbsp; &nbsp; &nbsp; };&nbsp; &nbsp; case useCombobox.stateChangeTypes.InputKeyDownArrowDown:&nbsp; &nbsp; case useCombobox.stateChangeTypes.InputKeyDownArrowUp:&nbsp; &nbsp; &nbsp; if (!actionAndChanges.changes.inputValue) return actionAndChanges.changes;&nbsp; &nbsp; &nbsp; return {&nbsp; &nbsp; &nbsp; &nbsp; ...actionAndChanges.changes,&nbsp; &nbsp; &nbsp; &nbsp; userInput: actionAndChanges.changes.inputValue,&nbsp; &nbsp; &nbsp; &nbsp; inputValue: actionAndChanges.getItemNodeFromIndex(&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; actionAndChanges.changes.highlightedIndex&nbsp; &nbsp; &nbsp; &nbsp; ).innerText&nbsp; &nbsp; &nbsp; };&nbsp; &nbsp; default:&nbsp; &nbsp; &nbsp; return actionAndChanges.changes; // otherwise business as usual.&nbsp; }}function DropdownSelect() {&nbsp; const [inputItems, setInputItems] = useState(items);&nbsp; const {&nbsp; &nbsp; isOpen,&nbsp; &nbsp; getToggleButtonProps,&nbsp; &nbsp; getLabelProps,&nbsp; &nbsp; getMenuProps,&nbsp; &nbsp; getInputProps,&nbsp; &nbsp; getComboboxProps,&nbsp; &nbsp; highlightedIndex,&nbsp; &nbsp; getItemProps&nbsp; } = useCombobox({&nbsp; &nbsp; items: inputItems,&nbsp; &nbsp; stateReducer,&nbsp; &nbsp; onInputValueChange: ({ userInput, inputValue }) => {&nbsp; &nbsp; &nbsp; if (userInput === inputValue) {&nbsp; &nbsp; &nbsp; &nbsp; const filteredItems = items.filter(item =>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; item.toLowerCase().startsWith(inputValue.toLowerCase())&nbsp; &nbsp; &nbsp; &nbsp; );&nbsp; &nbsp; &nbsp; &nbsp; setInputItems(filteredItems);&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }&nbsp; });&nbsp; return (&nbsp; &nbsp; <React.Fragment>&nbsp; &nbsp; &nbsp; <label {...getLabelProps()}>Choose an element:</label>&nbsp; &nbsp; &nbsp; <div style={{ display: "inline-block" }} {...getComboboxProps()}>&nbsp; &nbsp; &nbsp; &nbsp; <input {...getInputProps()} />&nbsp; &nbsp; &nbsp; &nbsp; <button {...getToggleButtonProps()} aria-label="toggle menu">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &#8595;&nbsp; &nbsp; &nbsp; &nbsp; </button>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; <ul {...getMenuProps()} style={menuStyles}>&nbsp; &nbsp; &nbsp; &nbsp; {isOpen &&&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; inputItems.map((item, index) => (&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; style={&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; highlightedIndex === index ? { backgroundColor: "#bde4ff" } : {}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; key={`${item}${index}`}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {...getItemProps({ item, index })}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; >&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {item}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ))}&nbsp; &nbsp; &nbsp; </ul>&nbsp; &nbsp; </React.Fragment>&nbsp; );}render(<DropdownSelect />, document.getElementById("root"));