我试图让附加到此脚本中的
<button>import React, {useEffect} from 'react';
const GlightboxComponent = () => {
useEffect(() => {
const lightbox = GLightbox({
selector: '.glightbox-link',
});
}, []);
return (
<div>
<a href="#lightbox-div" className="glightbox-link" data-type="inline"
data-gallery="my-gallery">open lightbox</a>
<div id="lightbox-div" style={{display: 'none'}}>
<button onClick={() => console.log('click')}>mybutton</button>
</div>
</div>
)
};
export default GlightboxComponent;
灯箱在 div 打开的范围内工作，但是当我单击按钮时没有任何反应。我找不到任何干扰的 css 或 javascript，所以我想知道问题是否是基于 React 和 Glightbox 之间的冲突。作为测试，我运行了一段等效的代码作为静态网站。
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<link href="/assets/vendor/glightbox/css/glightbox.css" rel="stylesheet">
</head>
<body>
<a href="#lightbox-div" class="lightbox-link" data-type="inline"
data-gallery="my-gallery">open lightbox</a></p>
<div id="lightbox-div" style="display: none">
<button onClick="console.log('click');">mybutton</button>
</div>
</body>
<script src="/assets/vendor/glightbox/js/glightbox.js"></script>
<script>
const lightbox = GLightbox({
selector: '.lightbox-link',
});
</script>
</html>
在这种情况下，按钮上的 onClick 事件确实有效（将其作为灯箱打开并查看）。我的 React 代码中的脚本导入完全相同，并且使用相同的文件（并且是唯一使用的显式导入）。任何有关这个问题的见解将不胜感激，谢谢。
#lightbox-div
并将其粘贴到自己的 html 标记中。所以，事实上，react
onClick保留在
#lightbox-div中，其中有
display: none。请注意，react
onClick和 native
onclick是不同的东西。