如何解决AgGridReact在新窗口中打开表格
我试图使用React的新Portal功能,以便在弹出窗口中打开AgGridReact组件。但是,我遇到的问题是当我在新窗口中打开组件时,当鼠标光标位于弹出窗口中时,表功能不起作用。但是,如果将鼠标拖到原始窗口中,该组件将开始工作,并允许我在鼠标位于原始窗口上方而不是弹出窗口上方的情况下更改列的大小。
具体来说,我正在创建一个新的html,然后调用ReactDOM.createPortal(this.props.children,this.containerEl)
(containerEl
是创建的html元素)。然后,将新元素附加到创建的外部窗口。
然后我将containerEl
作为popupParent
传递给AgGridReact组件。
如果有人想再看一遍我可以按要求发布的代码。但是,任何帮助或指示都将不胜感激。
渲染AgGridReact的位置
const [openedElement,setopenedElement] = useState()
const updateOpenedElement = val => {
!openedElement && setopenedElement(val)
}
<AgGridReact
...
popupParent={openedElement? openedElement: window.document.getElementById("root")}
...
>
</AgGridReact>)
NewWindow的代码如下
const copyStyles = (sourceDoc,targetDoc) => {...}
class NewWindow extends React.Component {
constructor(props) {
super(props)
this.setopenedElement = props.setopenedElement
this.containerEl = document.createElement('div')
this.externalWindow = null
}
render() {
this.setopenedElement(this.containerEl)
return ReactDOM.createPortal(this.props.children,this.containerEl)
}
componentDidMount() {
this.externalWindow = window.open("","","width=600,height=400,left=200,top=200")
copyStyles(document,this.externalWindow.document)
this.externalWindow.document.body.appendChild(this.containerEl)
}
componentwillUnmount() {
this.externalWindow.close()
}
}
setopenedElement在父组件中调用,我正在使用该父组件来创建popupParent将使用的元素。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。