时间戳

首页 > 解决方案 > React Bootstrap：触发 Popover 似乎会破坏 Dropdown 组件

javascript - React Bootstrap：触发 Popover 似乎会破坏 Dropdown 组件

问题描述

我有一个父组件，它同时呈现 react-bootstrap Popover 和 DropdownButton，就像这样。

const OverlayTrigger = ReactBootstrap.OverlayTrigger;
const Popover = ReactBootstrap.Popover;
const DropdownButton = ReactBootstrap.DropdownButton;
const Dropdown = ReactBootstrap.Dropdown;

class App extends React.Component {
  render() {
    return (
      <React.Fragment>
        <div className="d-flex w-50 justify-content-around">
          <OverlayTrigger
            trigger="hover"
            placement="right"
            overlay={
              <Popover id="popover-basic">
                <Popover.Title as="h3">Popover</Popover.Title>
                <Popover.Content>My Popover</Popover.Content>
              </Popover>
            }
          >
            <Button>Hover Over Me First</Button>
          </OverlayTrigger>

          <DropdownButton title="Then, Click Me Second">
            <Dropdown.Item href="#/action-1">This</Dropdown.Item>
            <Dropdown.Item href="#/action-2">Overlay</Dropdown.Item>
            <Dropdown.Item href="#/action-2">Won't</Dropdown.Item>
            <Dropdown.Item href="#/action-2">Apper</Dropdown.Item>
            <Dropdown.Item href="#/action-3">After</Dropdown.Item>
            <Dropdown.Item href="#/action-3">Clicking</Dropdown.Item>
            <Dropdown.Item href="#/action-3">Popover</Dropdown.Item>
          </DropdownButton>
        </div>
      </React.Fragment>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

问题：一旦通过事件触发弹出框，下拉菜单将不再起作用，即使在弹出框被解除后也是如此。我已经使用了 Dropdown 和 DropdownButton 组件，但问题仍然存在。我什至尝试将弹出框的触发事件更改为悬停，但也没有运气。

眼镜：

如果您想摆弄它，这是一支演示问题的笔https://codepen.io/UntidyJoseph/pen/abZaZqe

关于我做错了什么的任何想法？

编辑：我还应该提到这两个组件都直接来自 React-Bootstrap 文档，并且似乎有充分的理由一起工作。

标签： javascriptreactjscreate-react-appreact-bootstrappopper.js

解决方案

将“react-overlays”更新到版本 >= 4.1.1 解决了这个问题。我只是将这个特定版本添加到我的 package.json 文件中，以避免通过依赖解析坚持旧的 2.x。

推荐阅读