Реагирующее выпадающее меню открывает сразу все выпадающие меню - PullRequest
Новая
       42

Реагирующее выпадающее меню открывает сразу все выпадающие меню

0 голосов
/ 13 января 2020

Я создал простое выпадающее меню с использованием перехватчиков React. Он работает так, как я хочу, с одним исключением - он сразу открывает все выпадающие меню. Это имеет смысл, учитывая, что я использую одно состояние, которое я использую для всех раскрывающихся экземпляров: 

const [open, setOpen] = useState(false)

Затем я использую onClick (и onBlur), чтобы установить состояние, когда кто-то нажимает на раскрывающееся меню: 

onClick={() => setOpen(state => !state)}
onBlur={() => setOpen(false)}

Когда open установлен на true, раскрывающееся меню установлено на display: block;. Когда оно ложно, оно установлено на display: none; Это установлено в css (с использованием стилизованных компонентов).

Так что все это прекрасно работает для одного выпадающего меню - проблема в том, каждый экземпляр выпадающего меню связан с состоянием open. Это означает, что если для open установлено значение true, то в каждом раскрывающемся меню отображается - false, ни одно из них не отображается.

Как изменить раскрывающееся меню, чтобы можно было переключать только раскрывающееся меню, в котором щелкают ?

Спасибо.

1 Ответ

2 голосов
/ 13 января 2020

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

const Dropdown =() => {
    const [open, setOpen] = useState(false);

    onClick=() => setOpen(state => !state)
    onBlur=() => setOpen(false)
    return (<input onClick={this.onClick}>
        ....
    </input>)
}

const otherComponent = () => {
    return (
       <div>
          <Dropdown/>
          <Dropdown/>
       </div>
     )
}
...