Автоматически закрывать раскрывающийся список при выборе / открытии нового раскрывающегося списка (Реагировать) - PullRequest
Новая
       10

Автоматически закрывать раскрывающийся список при выборе / открытии нового раскрывающегося списка (Реагировать)

1 голос
/ 16 апреля 2019

У меня есть компонент раскрывающегося списка, и я хотел бы иметь возможность автоматически закрывать предыдущий раскрывающийся список при нажатии на другой элемент раскрывающегося меню.У меня работает раскрывающийся компонент, но я не могу их закрыть после выбора нового элемента.Кроме того, я хотел бы закрыть элементы, если вы нажмете где-нибудь на странице.Любая помощь будет принята с благодарностью, заранее спасибо! 

export const Dropdown: FC<Props> = ({ passedBindings }) => {
  let [isDropdownOpen, setDropdownOpen] = useState(false);
  const [ firstMediaBindings, ...restMediaBindings ] = bindings.mediaFlagBindings||[{}];

  const toggleDropdown = () => {
    setDropdownOpen(!isDropdownOpen)
  };

  return (
    <div { ...optionalAttributes }>
        <Container>
          {
            firstMoleculeMediaFlag()
          }
          {isDropdownOpen && restMediaBindings.length > 0 &&
            <Container passedBindings={({
              padding: {
                direction: "all",
                size: "size2"
              }
            })}>
              {
                restMediaBindings.map((mediaFlagBindings: IMoleculeMediaFlag, index: number) => {
                  return (
                    <Container
                      key={index}
                      passedBindings={({
                        padding: {
                          direction: "all",
                          size: "size1"
                        }
                    })}>
                      <MediaFlag key={index} passedBindings={mediaFlagBindings} />
                    </Container>
                  )
                })
              }
            </Container>
          }
        </Container>

      </Container>
    </div>
  )

``

1 Ответ

1 голос
/ 16 апреля 2019

Вам нужен фоновый DIV, чтобы разрешить щелчок и выход в любом месте на странице.

Это как трехслойная система.

  • 1-й: содержание вашей страницы
  • 2-й: фон идет сверху
  • 3-й: ваш выпадающий список выходит на задний план

Пример (используется styled-components для стиля, но вы можете использовать стиль по своему желанию):

Backdrop.js

Отображает div поверх содержимого вашей страницы. 

const Backdrop = styled.div`
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.2);
  z-index: 100;
`;

Используйте это так: условно с isDropdownOpen

Dropdown.js

Но не забудьте обозначить свой выпадающий список z-index с чем-то большим, чем z-index, которое вы использовали на фоне. В этом примере я использовал 100 для фона, так что вы можете использовать 200. 

export const Dropdown() {
  ...
  return(
    isDropdownOpen ?
      <Backdrop onClick={toggleDropdown}/>
      // Here goes the rest of your return for your dropdown
  );
}

Если вам нужен один выпадающий список, чтобы закрыть предыдущий при нажатии, вам нужно что-то в вашем state, которое сообщит вам, какой из них открыт.

Что-то вроде:

const [indexDropdownOpened, setIndexDropdownOpened] = useState(false);

Вы можете установить его на false (начальное значение), когда раскрывающийся список не открыт, и вы можете установить его с помощью index (или key), чтобы указать компоненту, какой из них является открытым.

В каждом раскрывающемся списке при рендеринге: 

...
return(
  <Container
    key={index}
    onClick={()=>setIndexDropdownOpened(index)}
  />
);

Тогда на заднем плане вы могли бы сделать: 

<Backdrop onClick={()=>setIndexDropdownOpnened(false)}/> // So it closes the dropdown
...