Javascript 我能'；t在React上正确调用其他组件中的模态组件_Javascript_Html_Reactjs

Javascript 我能'；t在React上正确调用其他组件中的模态组件

javascript html reactjs

Javascript 我能'；t在React上正确调用其他组件中的模态组件,javascript,html,reactjs,Javascript,Html,Reactjs,我试图在我的应用程序的其他组件中调用一个模态组件，当我单击de按钮打开de modal时，它工作正常，但当我单击关闭模态或单击“确定”关闭模态时，它不工作。我用Antd来做这个，我不知道我做错了什么，如果你能帮助我，我将非常感激。谢谢大家! 我的菜单组件，我称之为模态组件 import React from "react"; import { Layout, Menu, Button } from "antd"; import css from "./index.module.css"; imp

我试图在我的应用程序的其他组件中调用一个模态组件，当我单击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;

从“React”导入React；
从“antd”导入{布局、菜单、按钮}；
从“/index.module.css”导入css；
从“/./../Assets/logo\u blue\u full.png”导入imgLogo；
从“/./../CartContext”导入CartContext；
从“/./../CartIcon”导入CartIcon；
从“/./Modal/index”导入ModalApp；
const{Header}=布局；
类MenuAntd扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
可见：假
};
}
showModal=（）=>{
这是我的国家({
可见：正确
});
};
render（）{
返回(
库索斯
地籍
诱捕者
);
}
}
MenuAntd.contextType=CartContext；
导出默认菜单；

我的模态组件

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;

import React，{Component}来自“React”；
从“antd”导入{Modal}；
类ModalApp扩展了组件{
建造师（道具）{
超级（道具）；
}
handleCancel=（）=>{
这是我的国家({
可见：假
});
};
handleOk=（）=>{
这是我的国家({
可见：假
});
};
render（）{
返回(
一些内容
);
}
}
导出默认ModalApp；

处理模式的设置状态需要位于存储状态的组件中

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;

从“React”导入React；
从“antd”导入{布局、菜单、按钮}；
从“/index.module.css”导入css；
从“/./../Assets/logo\u blue\u full.png”导入imgLogo；
从“/./../CartContext”导入CartContext；
从“/./../CartIcon”导入CartIcon；
从“/./Modal/index”导入ModalApp；
const{Header}=布局；
类MenuAntd扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
可见：假
};
}
HandleModel=（状态）=>{
这是我的国家({
可见：状态
});
};
render（）{
返回(
库索斯
地籍
这个.handleModal（真）}
>
诱捕者
);
}
}
MenuAntd.contextType=CartContext；
导出默认菜单；

import React，{Component}来自“React”；
从“antd”导入{Modal}；
类ModalApp扩展了组件{
建造师（道具）{
超级（道具）；
}
render（）{
返回(
this.props.handleModal（false）}
onCancel={（）=>this.props.handleModal（false）}
>
一些内容
);
}
}
导出默认ModalApp；

处理模式的设置状态需要位于存储状态的组件中

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;

从“React”导入React；
从“antd”导入{布局、菜单、按钮}；
从“/index.module.css”导入css；
从“/./../Assets/logo\u blue\u full.png”导入imgLogo；
从“/./../CartContext”导入CartContext；
从“/./../CartIcon”导入CartIcon；
从“/./Modal/index”导入ModalApp；
const{Header}=布局；
类MenuAntd扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
可见：假
};
}
HandleModel=（状态）=>{
这是我的国家({
可见：状态
});
};
render（）{
返回(
库索斯
地籍
这个.handleModal（真）}
>
诱捕者
);
}
}
MenuAntd.contextType=CartContext；
导出默认菜单；

import React，{Component}来自“React”；
从“antd”导入{Modal}；
类ModalApp扩展了组件{
建造师（道具）{
超级（道具）；
}
render（）{
返回(
this.props.handleModal（false）}
onCancel={（）=>this.props.handleModal（false）}
>
一些内容
);
}
}
导出默认ModalApp；