我無法在 React 上正確調用其他組件中的模態組件

Question

我正在嘗試在我的應用程序中的其他組件中調用一個模態組件，當我單擊 de 按鈕打開 de modal 時，它的工作正常，但是當我單擊以關閉模態或單擊“確定”以關閉模態它不起作用。 我正在使用Antd來做這個，我不知道我做錯了什么，如果你能幫助我，我將非常感激。 謝謝 ！

我的菜單組件，我在其中調用我的模態組件

import React from "react";
import { Layout, Menu, Button } from "antd";
import css from "./index.module.css";
import imgLogo from "./../../Assets/logo_blue_full.png";

import CartContext from "./../../CartContext";
import CartIcon from "./../../CartIcon";
import ModalApp from "./../Modal/index";

const { Header } = Layout;

class MenuAntd extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      visible: false
    };
  }

  showModal = () => {
    this.setState({
      visible: true
    });
  };


  render() {
    return (
      <>
        <Header className={css.borderMenu}>
          <Menu theme="dark" style={{ lineHeight: "64px" }}>
            <img className={css.imagemLogo} src={imgLogo} alt="logo" />

            <Menu.Item key="1">Cursos</Menu.Item>
            <Menu.Item key="2">Cadastre-se</Menu.Item>
            <Menu.Item key="3" onClick={this.showModal}>Entrar</Menu.Item>
          </Menu>
        </Header>

        <ModalApp visible={this.state.visible} />

      </>
    );
  }
}

MenuAntd.contextType = CartContext;

export default MenuAntd;

我的模態組件

import React, { Component } from "react";

import {  Modal } from "antd";

class ModalApp extends Component {
  constructor(props) {
  super(props);
  }

  handleCancel = () => {
    this.setState({
      visible: false
    });
  };

  handleOk = () => {
    this.setState({
      visible: false
    });
  };

  render() {
    return (
      <div>
        <Modal
          title="My Modal"
          visible={this.props.visible}
          onOk={this.handleOk}
          onCancel={this.handleCancel}
        >
          <p>Some contents...</p>
        </Modal>
      </div>
    );
  }
}

export default ModalApp;

Answer 1

處理模態的 setState 需要位於存儲狀態的組件中。

import React from "react";
import { Layout, Menu, Button } from "antd";
import css from "./index.module.css";
import imgLogo from "./../../Assets/logo_blue_full.png";

import CartContext from "./../../CartContext";
import CartIcon from "./../../CartIcon";
import ModalApp from "./../Modal/index";

const { Header } = Layout;

class MenuAntd extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      visible: false
    };
  }

  handleModal = (status) => {
    this.setState({
      visible: status
    });
  };


  render() {
    return (
      <>
        <Header className={css.borderMenu}>
          <Menu theme="dark" style={{ lineHeight: "64px" }}>
            <img className={css.imagemLogo} src={imgLogo} alt="logo" />
            <Menu.Item key="1">Cursos</Menu.Item>
            <Menu.Item key="2">Cadastre-se</Menu.Item>
            <Menu.Item 
              key="3" 
              onClick={() => this.handleModal(true)}
            >
              Entrar
            </Menu.Item>
          </Menu>
        </Header>

        <ModalApp 
          visible={this.state.visible}
          handleModal={this.handleModal}
        />

      </>
    );
  }
}

MenuAntd.contextType = CartContext;

export default MenuAntd;

import React, { Component } from "react";

import {  Modal } from "antd";

class ModalApp extends Component {
  constructor(props) {
  super(props);
  }

  render() {
    return (
      <div>
        <Modal
          title="My Modal"
          visible={this.props.visible}
          onOk={() => this.props.handleModal(false)}
          onCancel={() => this.props.handleModal(false)}
        >
          <p>Some contents...</p>
        </Modal>
      </div>
    );
  }
}

export default ModalApp;