ReactBootstrap提供了一个弹出控件。我希望在弹出窗口外部以与模态工作方式类似的方式解除此问题(默认情况下,只需单击开箱即可解散)。
有没有办法使用ReactBootstrap执行此操作,还是需要自定义代码?
popf的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>;
}
});
答案 0 :(得分:15)
不,您不需要任何自定义代码。只需添加rootClose
道具,这样就可以了。它在react bootstrap官方文档https://react-bootstrap.netlify.com/components/overlays/#overlays-api
<OverlayTrigger trigger='click' rootClose>
....
</OverlayTrigger>
答案 1 :(得分:1)
我认为这应该适合你:
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'));
这是jsfiddle
答案 2 :(得分:1)
除了@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()
语句
答案 3 :(得分:0)
对于React Bootstrap 4.4,必须在onHide
旁边添加一个rootClose
函数,这些属性也适用于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 />);