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必须位于存储状态的组件中。

> let foo = { a: 123, toString: function() { return `an object with value ${this.a}`; } };

> foo
{ a: 123, toString: [Function: toString] }

> foo.toString()
'an object with value 123'

> foo.a = 456;
456

> foo.toString()
'an object with value 456'

> `${foo}`
'an object with value 456'

> "foo: " + foo
'foo: an object with value 456'

> "foo: ".concat(foo)
'foo: an object with value 456'

> let d = {};

> d[foo] = "hello";
'hello'

> d
{ 'an object with value 456': 'hello' }

> Symbol(foo)
Symbol(an object with value 456)

> String(foo)
'an object with value 456'

> let bar = Object.assign({}, foo);   // clone

> bar.a = 789;
789

> [foo, bar].join(" - ")
'an object with value 456 - an object with value 789'

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上正确调用其他组件中的模式组件

1 个答案: