ReactJS 和 UIkit 3.6.5：单击事件不会在模态内触发 window

Question

我在 ReactJS 上开发了一个应用程序并尝试配置 UIkit 模式 window。问题是按钮（“保存”）上的点击处理程序不起作用，点击事件基本上没有在模态 window 中被监听。我将按钮放在模态 window 之外 - 单击事件有效（消息出现在控制台中）。这是一个错误还是我做错了什么？感谢关注！

return(
    <>
        <button
         className="uk-button uk-button-primary uk-modal-close"
         type="button"
         onClick={() => console.log("Click")}>Save</button> {/* It works */}
         
        <button className="uk-button uk-button-primary" uk-toggle="target: #modal-save">Publish</button>           
        
        <div id="modal-save" uk-modal="true">
            <div className="uk-modal-dialog uk-modal-body">                    
                <p>Save changes?</p>
                <p className="uk-text-right">                                               
                    <button className="uk-button uk-button-default uk-modal-close" type="button">Cancel</button>
                    <button
                     className="uk-button uk-button-primary uk-modal-close"
                     type="button"
                     onClick={() => console.log("Click")}>Save</button> {/* Doesn't work */}
                </p>
            </div>
        </div>
        
        
    </>
    
);

Answer 1

这个问题是由于事件委托（React 17）的变化引起的 - https://reactjs.org/blog/2020/10/20/react-v17.html#changes-to-event-delegation

我用 Portals(https://reactjs.org/docs/portals.html) 解决了这个问题，即

const ModalPortal = props => {
  const modalRoot = document.createElement('div');
  modalRoot.setAttribute('uk-modal', 'bg-close: false');
  modalRoot.id = 'modal-save';

  useEffect(() => {
    document.body.appendChild(modalRoot);
    return () => {
      document.body.removeChild(modalRoot);
    }
  });

  return ReactDOM.createPortal(props.children, modalRoot);
} 

export default ModalPortal;

那么你应该将模态内容包裹在父元素中

<ModalPortal>
  // modal body
  <span onClick={() => console.log('test')}>Test</span>
</ModalPortal>

ReactJS 和 UIkit 3.6.5：单击事件不会在模态内触发 window

ReactJS and UIkit 3.6.5: click event isn't fired inside modal window

uikit

reactjs

getuikit