javascript - 我无法在React上正确调用其他组件中的模态组件

Question

我正在尝试在应用程序中的其他组件中调用模态组件，当我单击 de 按钮打开模态时，它工作正常，但是当我单击关闭模态或单击“确定”时关闭模式它不起作用。我正在使用 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;