在 ReactJS-popup 触发器中使用 ref

Question

我有一个带有自定义列标题的反应表组件

const popupRef = createRef();
const column = [{
Header: () =>
<div ref={popupRef} className="eye-icon">
<img src={icon}/>
</div>
fixed: "left",
sortable: false,
headerClassName: "table-header-class",
className: "table-row-class",
width: 70
}];

我有一个 reactjs 弹出窗口，我想在按下该组件后触发它。

return (
<div>
<Popup
className="popup"
closeOnDocumentClick
trigger={popupRef.current}
arrow={true}
repositionOnResize={true}
on="click"
position="bottom left"
>
<div className="popup">
<span>popup</span>
</div>
</Popup>
<div className="table">
<ReactTableFixedColumns
showPagination={false}
defaultPageSize={selectedTestsLength}
data={data}
style={{height: "73vh"}}
columns={column}
/>
</div>
</div>
);

它不起作用。 当然，我可以在标题的div 中制作 onClick 事件以使用 reactjs-popup open 属性强制打开弹出窗口 - 但它出现在屏幕中央，看起来像模态，所以这种方法不合适，我希望它坚持到div，放置在正确的位置。

Answer 1

我认为你在这里使用了错误的方法。不需要参考来实现您想要的。

只需在标题内声明弹出窗口：

const column = [{
Header: () =>
<Popup trigger={
<div ref={popupRef} className="eye-icon">
<img src={icon}/>
</div>
}>
<div className="popup">
<span>popup</span>
</div>
</Popup>
fixed: "left",
sortable: false,
headerClassName: "table-header-class",
className: "table-row-class",
width: 70
}];

我无法访问您的完整代码，所以我不能确定，但这应该会给您带来想法。

Answer 2

我只是做了一个空的div并在其中放置触发器

trigger={<div className="sample-trigger"></div>}
.sample-trigger {
width: 1px;
height: 1px;
display: block;
visibility: hidden;
}

在我用来触发弹出窗口的主div 中，我设置 onClick 以更改 {wasPopupOpen} 的状态

<Popup
className="popup"
closeOnDocumentClick
open={wasEyePopupOpen}...

我还在弹出窗口上进行了一些调整，使其看起来像在该div内部。