reactjs - Reactjs 中的 Downshift - 菜单下拉菜单仅显示所选项目

Question

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

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

const dropdownItems = [
  { value: 'All' },
  { value: 'Database A' },
  { value: 'Database B' },
  { value: 'Database C' },
  { value: 'Database D' },
];
return (
  <Downshift itemToString={item => (item ? item.value : '')}>
    {({
      getMenuProps,
      getItemProps,
      getToggleButtonProps,
      getRootProps,
      isOpen,
      inputValue,
      selectedItem,
      highlightedIndex,
    }) => console.log(
      selectedItem === null ? dropdownItems[0].value : selectedItem.value,
    ) || (
        <Container {...getRootProps()}>
          <button {...getToggleButtonProps()}>
            {isOpen
              ? selectedItem === null
                ? dropdownItems[0].value
                : selectedItem.value
              : selectedItem === null
                ? dropdownItems[0].value
                : selectedItem.value}
          </button>
          {isOpen ? (
            <Menu {...getMenuProps()}>
              {dropdownItems
                .filter(
                  item => !inputValue || item.value.includes(inputValue),
                )
                .map((item, index) => (
                  <Item
                    {...getItemProps({
                      key: item.value,
                      index,
                      item,
                      style: {
                        fontWeight:
                          index === highlightedIndex
                            ? 'bold'
                            : null,
                      },
                    })}
                  >
                    {item.value}
                  </Item>
                ))}
            </Menu>
          ) : null}
        </Container>
      )
    }
  </Downshift>
);

标签： reactjsdownshift

Answer 1

.filter(item => !inputValue || item.value.includes(inputValue),) 

为了解决这个问题，我删除了.filter, 它只导致选择的值显示在下拉列表中。

这是更新的菜单标签

 <Menu {...getMenuProps()}>
     {dropdownItems.map((item, index) => (
        <Item
            {...getItemProps({
                  key: item.value,
                 index,
                   item,
                      style: {
                  fontWeight:
                   index === highlightedIndex
                    ? 'bold'
                    : null,
                       },
                        })}
              >
          {item.value}
         </Item>
         ))}
          </Menu>