Всплывающее окно React Bootstrap в триггере Overlay не исчезает при удалении логического родителя

Я использую всплывающее окно в триггере наложения для управления подтверждением удаления. На главной странице есть список элементов, и у каждого из этих элементов есть нажимаемая кнопка X, которая запускает взаимодействие с пользователем при удалении. Затем отображается всплывающее окно, и пользователь нажимает «Подтвердить», чтобы продолжить удаление. Объект удаляется, и сборник запрашивает данные, которые должны быть в списке. Удаленного элемента больше нет в списке, но всплывающее окно остается видимым.

Мне это кажется действительно странным, потому что (насколько я могу судить) компоненты Overlay Trigger и Popover больше не упоминаются в методе any render ().

Это несколько похоже на response-bootstrap ModalTrigger doesn не скрываются, когда родительский элемент размонтирован, но, в отличие от этого сценария, в этом случае не используется свойство keys.

Соответствующие методы выглядят так ...

  render() {
    return (
      <tr
        className={this.listStyles()}
      >
        {this.renderListName()}
        {this.renderOwner()}
        <td>{this.renderLastModified()}</td>
        <td>
        {this.renderButtons()}
        {this.renderProcessing()}
        </td>
      </tr>
    );
  },
    
  renderOverlay() {
    return (
      <OverlayTrigger
        trigger='click'
        onEntering={this.handleDeletePopoverOpened}
        onExiting={this.handleDeletePopoverClosed}
        rootClose
        placement='bottom'
        overlay={this.renderPopover()}
      >
        {this.renderDeleteButton()}
      </OverlayTrigger>
    )
  },

  renderPopover() {
    return (
      <Popover id='delete_list' title="Confirm Delete">
        <strong>Are you sure?</strong>
        <ButtonGroup bsSize='small' className='deletionGroup'>
          <Button bsStyle='danger' onClick={this.handleDelete}>Delete</Button>
        </ButtonGroup>
      </Popover>
    )
  },

Я пробовал явно предсказать рендеринг всплывающего окна в состоянии, а затем установить это состояние в методе componentWillUnmount так, чтобы оно скрыло всплывающее окно. Это (как и следовало ожидать) тоже не работает, несомненно, потому что код никогда не запускается, поскольку метод рендеринга (правильно) не вызывается.

Я делаю что-то неправильно? Это просто дефект в React Bootsrap? С уважением.


person Courtland Caldwell    schedule 14.04.2016    source источник


Ответы (2)


Многолетний вопрос, надеюсь, вы нашли решение :-)

Та же проблема сохраняется: я решил ее, добавив rootClose в свой триггер.

person Justin    schedule 24.07.2017

Если ошибка не исчезнет ...

Используйте аксессуар rootClose, чтобы заставить всплывающее окно исчезнуть, просто щелкнув снаружи.

...
  <OverlayTrigger trigger="click" rootClose placement="right" overlay={popover}>
...

Замените триггер щелчка на триггер фокуса ... чтобы он исчез, щелкнув по нему ....

...
  <OverlayTrigger trigger="focus" placement="right" overlay={popover}>
...

источник .. Как отклонить реакцию -Bootstrap Popover при нажатии снаружи

person Ali Dhouib    schedule 09.02.2021