ReactBootstrap弹出框在点击外部时如何关闭

Question

ReactBootstrap 提供了一个弹出控件。我希望能够通过点击弹出框外部来关闭它，这与模态框的工作方式类似（默认情况下，只需单击框外即可关闭）。

是否可以使用 ReactBootstrap 来实现这一点，还是需要自定义编码？

这里有一个弹出框的 JSFiddle 示例：http://jsfiddle.net/226cwe4e/

React.createClass({
    render: function() {
        return <ReactBootstrap.OverlayTrigger trigger="click" placement="bottom" overlay={<ReactBootstrap.Popover title="Popover bottom"><strong>Holy guacamole!</strong> Check this info.</ReactBootstrap.Popover>}>
        <ReactBootstrap.Button bsStyle="default">Holy guacamole!</ReactBootstrap.Button>
      </ReactBootstrap.OverlayTrigger>;
    }
});

- undefined

---

你尝试过 trigger={["focus", "click"]} 吗？ - knowbody

@knowbody 非常接近了，但是 click 和 focus 的意思是，当你第一次点击它时，它会立即关闭（请参见 http://jsfiddle.net/862fht00/），只有 focus 意味着它的工作方式符合我的要求，但是再次点击链接不会关闭它，我认为这是最接近我想要的行为，所以我就选择了它。 - undefined

@knowbody，实际上“focus”也意味着在弹出窗口中单击某个内容会将其关闭，因此您不能在其中放置按钮。 - undefined

@knowbody 很有趣，这是不使用ReactBootstrap从头开始完成的。我会查找问题清单并+1它 :) 感谢你的帮助。 - undefined

对于那些感兴趣的人，ReactBootstrap 中的问题可以在 https://github.com/react-bootstrap/react-bootstrap/issues/233 找到。 - undefined

Answer 1

不，你不需要任何自定义代码。只需包括rootClose 属性，这样就可以为您完成了。 它在React Bootstrap官方文档中有说明 https://react-bootstrap.netlify.com/components/overlays/#overlays-api

<OverlayTrigger trigger='click' rootClose>
  ....
</OverlayTrigger>

- makuno

---

谢谢！我一直在努力寻找那个。 - Hanming Zeng

这份文档有误导性，我认为覆盖触发器与覆盖和继承属性不同。 - adir abargil

Answer 2

对于React Bootstrap 4.4，需要在rootClose中添加一个onHide函数，同时这些属性是针对Overlay组件而非OverlayTrigger。

以下是一个示例：

function Example() {
  const [show, setShow] = useState(false);
  const target = useRef(null);

  const handleClick = (event) => {
    setShow(!show);
  };

  return (
    <div ref={ref}>
      <Button onClick={handleClick} ref={target}>Holy guacamole!</Button>

      <Overlay
        show={show}
        target={target.current}
        placement="bottom"
        rootClose
        onHide={() => setShow(false)}
      >
        <Popover id="popover-contained">
          <Popover.Title as="h3">Popover bottom</Popover.Title>
          <Popover.Content>
            <strong>Holy guacamole!</strong> Check this info.
          </Popover.Content>
        </Popover>
      </Overlay>
    </div>
  );
}

render(<Example />);

- Guille Acosta

Answer 3

我认为这对您有用：

我认为这对您有用：

const Hello = () => (
  <ReactBootstrap.OverlayTrigger 
    trigger="focus" 
    placement="bottom" 
    overlay={
      <ReactBootstrap.Popover title="Popover bottom">
        <strong>Holy guacamole!</strong> Check this info.   
      </ReactBootstrap.Popover>
    }
  >
    <ReactBootstrap.Button bsStyle="default">Holy guacamole!</ReactBootstrap.Button>
  </ReactBootstrap.OverlayTrigger>
);

ReactDOM.render(<Hello />, document.getElementById('app'));

Here is jsfiddle

- knowbody

---

不建议使用“hover”或“focus”触发器来弹出气泡，因为它们在键盘和移动设备上的可访问性较差。 - Patrick

Answer 4

除了 @makuno 的回答之外，如果您希望在弹出窗口内部点击时保持弹出窗口打开，并在外部点击时关闭它，您可以使用以下代码。

<OverlayTrigger trigger='click' rootClose>
    <div onClick={e => {
        e.stopPropagation(); 
        e.preventDefault(); 
        e.nativeEvent.stopImmediatePropagation();
    }}>
        Click me, I won't dismiss the popover
    </div>  
....
</OverlayTrigger>

这里需要注意的关键点是e.nativeEvent.stopImmediatePropagation()语句。

- Nahush Farkande

---

如果您正在在React-Bootstrap模态框中创建一个弹出窗口，这尤其重要。 - Clinton Chau

Answer 5

以上方法都对我没用，但这个方法有效。我必须传递rootCloseEvent="mousedown"和rootClose={true}

<OverlayTrigger
          rootClose={true}
          rootCloseEvent="mousedown"
          trigger="click"
          placement="left"
          overlay={
            <div className="delete--team cursor-pointer">
              some text
            </div>
          }
        >

- Sanan Ali

---

在rootCloseEvent中，我添加了rootCloseEvent='click'，这样它就会在触发元素被点击时自动关闭，并且当你点击弹出框的外部区域时也会关闭。 - Max