为什么这些功能在模态窗口中不起作用？

如何解决为什么这些功能在模态窗口中不起作用？

当我从模态窗口调用它时，函数调用不起作用。如果您从布局中的模态窗口中取出按钮，则一切正常。

模态窗口本身也起作用（打开、关闭） 当打开时，模态窗口中的“取消”按钮起作用，但这是通过“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