Переключение вниз в Reactjs - раскрывающееся меню только с выбранным - PullRequest
Новая
       29

Переключение вниз в Reactjs - раскрывающееся меню только с выбранным

0 голосов
/ 14 мая 2019

У меня проблемы с использованием Downshift, изначально у меня все меню варианты, но как только я выберу один вариант, это единственный это отображается в меню при следующем нажатии.

enter image description here

Это мой текущий код, любые отзывы о причинах этого? 

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>
);

1 Ответ

0 голосов
/ 14 мая 2019 
.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>
...