Twitter bootstrap React引导-如何手动关闭OverlyTrigger
我有一个Twitter bootstrap React引导-如何手动关闭OverlyTrigger,twitter-bootstrap,reactjs,react-bootstrap,Twitter Bootstrap,Reactjs,React Bootstrap,我有一个OverlayTrigger包装一个Popover,其中包含一些表单输入和一个按钮来保存数据并关闭 save(e) { this.setState({ editing: false }) this.props.handleUpdate(e); } render() { return ( <OverlayTrigger trigger="click" rootClose={true} onExit={this.save.b
OverlayTrigger
包装一个Popover
,其中包含一些表单输入和一个按钮来保存数据并关闭
save(e) {
this.setState({ editing: false })
this.props.handleUpdate(e);
}
render() {
return (
<OverlayTrigger trigger="click"
rootClose={true}
onExit={this.save.bind(this) }
show={this.state.editing}
overlay={
<Popover title="Time Entry">
<FormGroup>
<ControlLabel>Data: </ControlLabel>
<FormControl type={'number'}/>
</FormGroup>
<Button onClick={this.save.bind(this) }>Save</Button>
</Popover>
}>
保存(e){
this.setState({editing:false})
此.props.handleUpdate(e);
}
render(){
返回(
我有rootClose=true
,我的回调被执行onExit
,但我看不到手动关闭覆盖的方法。我正在尝试使用引导模式中的show
属性(可预测的)不起作用。添加对隐藏函数的引用不是OverlyTrigger上的公共函数。如果有人正在搜索没有“关闭”按钮的解决方案,而是->第二次单击此处将其关闭,则设置:
<OverlayTrigger trigger="focus" placement="top" overlay={popover}>
<a tabindex="0">Some text</a>
</OverlayTrigger>
一些文本
我用以下代码解决了这个问题:
从“React”导入React;
从“react dom”导入react dom;
进口{
集装箱,
爆米花,
覆盖索具,
按钮
一行
上校
}从“反应引导”;
//风格
导入“bootstrap/dist/css/bootstrap.css”;
常量PopoverCustom=()=>{
让ref=React.useRef(null);
常数popover=(
{/*Popover right*/}
这里有一些精彩的内容,非常吸引人。
正确的?
ref.handleHide()}
size=“sm”
variant=“轮廓暗”
className=“pt-0 pb-0”
>
藏府绸
);
返回(
(ref=r)}
容器={ref.current}
trigger=“单击”
placement=“自动”
覆盖={popover}
根闭合
>
展示府绸
);
};
函数App(){
返回(
);
}
const rootElement=document.getElementById(“根”);
ReactDOM.render(我们有指令尽可能避免ref
s,但这非常有效。这在react bootstrap 0.30.7和react 15.4.2中不起作用。您知道现在如何完成吗?我现在无法测试,但它应该可以工作,因为api仍然包含隐藏方法[,或者您可以尝试使用这个方法[对于React 16,.hide()
起作用,但语法不同。我必须使用this.overlay=ref}>
,然后为功能组件ref.current.hide()调用this.overlay.hide();
。)不太灵巧。回答得好。我需要在popover关闭时设置一个标志,它是否有一个关闭事件,我可以监听并在它的回调中设置我的标志当你打开嵌套的工具提示时,这不是一个解决方案
<OverlayTrigger trigger="focus" placement="top" overlay={popover}>
<a tabindex="0">Some text</a>
</OverlayTrigger>