React-bootstrap, как закрыть раскрывающийся список

Я использую DropdownButton из react-bootstrap для создания раскрывающегося списка с пользовательским содержимым. . В содержимом пользователь может выбрать различные параметры и нажать кнопку в раскрывающемся списке, чтобы отправить выбранные параметры.

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

Это мой код:

<DropdownButton
  title={ name }
  variant="outline-secondary"
  onToggle={ this.handleDropdownToggle }
>
  <div className="body">
    { this.renderOptions(options) }
  </div>
  <div className="filter-submit">
    <Button variant="primary" onClick={ this.onSubmit }>
      Accept
    </Button>
  </div>
</DropdownButton>

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


reactjs react-bootstrap
person David Rojo    schedule 24.09.2019    source источник
comment
Это может быть связано с: stackoverflow.com/questions /18855132/   -  person g_bor    schedule 24.09.2019

Ответы (1)


arrow_upward
2
arrow_downward

Этого можно добиться с помощью простого изменения состояния, вызванного событием onClick.

В вашем компоненте реакции сделайте что-то вроде этого:

state = {
    showDropdown: false
}

toggleDropdown = () => {
    if (this.state.showDropdown) {
        this.setState({ showDropdown: false });
    } else {
        this.setState({ showDropdown: true });
    }
}

В раскрывающемся компоненте добавьте onClick, чтобы вызвать изменение этого состояния для любого элемента, который вы хотите открыть или закрыть в раскрывающемся меню. Упростите себе жизнь с помощью триггера onBlur, который закроется, если вы щелкнете в любом месте за пределами раскрывающегося списка:

<DropdownButton
  title={ name }
  variant="outline-secondary"
  onClick={() => this.toggleDropdown()}
  onBlur={() => this.toggleDropdown()}
>
  <Dropdown.Item href="#/action-1" onClick={() => this.toggleDropdown()}>Action</Dropdown.Item>
  <Dropdown.Item href="#/action-2" onClick={() => this.toggleDropdown()}>Another action</Dropdown.Item>
  <Dropdown.Item href="#/action-3" onClick={() => this.toggleDropdown()}>Something else</Dropdown.Item>
</DropdownButton>
person Alex Ross    schedule 03.03.2020