问题描述
当我从模态窗口调用它时,函数调用不起作用。如果您从布局中的模态窗口中取出按钮,则一切正常。
模态窗口本身也起作用(打开、关闭) 当打开时,模态窗口中的“取消”按钮起作用,但这是通过“uk-modal-close”布局类实现的。模态窗口来自 UIkit 库。控制台没有错误
import React,{Component} from 'react';
import UIkit from 'uikit';
export default class Editor extends Component {
constructor() {
super();
}
render() {
const modal = true;
return (
<>
<div className='panel'>
<button className="uk-button uk-button-primary" onClick={() => console.log("Work!")}>Publish</button> //This code works!
<button className="uk-button uk-button-primary" uk-toggle="target: #modal-save">Save</button>
</div>
<div id="modal-save" uk-modal={modal.toString()}>
<div className="uk-modal-dialog uk-modal-body">
<h2 className="uk-modal-title">Saving</h2>
<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"
onClick={() => this.save()}>Publish</button> //This code doesn`t work!
</p>
</div>
</div>
</>
)
}
选项 2
render() {
const modal = true;
return (
<>
<div className='panel'>
<button onClick={() => console.log("Work!")}>Publish</button> //This code works!
<button uk-toggle="target: #modal-save">modal</button> // this is to call a modal window
</div>
<div id="modal-save" uk-modal={modal.toString()}>
<button onClick={() => console.log("Work!")}>Publish</button> //This code doesn`t work!
</div>
</>
)
}
解决方法
这个问题是 react 17 中的事件委托。(https://reactjs.org/blog/2020/10/20/react-v17.html#changes-to-event-delegation)
您将不得不使用门户网站。
创建一个名为 ModalPortal.js 的新文件并将以下代码放入其中:
import React,{ useEffect } from "react";
import ReactDOM from "react-dom";
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;
然后在您的主文件中,替换:
<div id="modal-save" uk-modal={modal.toString()}>
<div className="uk-modal-dialog uk-modal-body">
<h2 className="uk-modal-title">Saving</h2>
<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"
onClick={() => this.save()}>Publish</button> //This code doesn`t work!
</p>
</div>
</div>
与:
<ModalPortal>
<div className="uk-modal-dialog uk-modal-body">
<h2 className="uk-modal-title">Saving</h2>
<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"
onClick={() => console.log("YES!!")}
type="button"
>
Publish
</button>{" "}
</p>
</div>
</ModalPortal>
工作示例:https://codesandbox.io/s/reverent-microservice-oy4os?file=/src/Editor.js