时间戳

首页 > 解决方案 > React 组件模式在加载时打开并且从不关闭

javascript - React 组件模式在加载时打开并且从不关闭

问题描述

我正在尝试一个模式，当我点击一个按钮时它会打开，但它在开始时是打开的，它永远不会关闭。

如何确保它在挂载时关闭，并且在我单击消息框外时关闭？

我正在从材料核心改编模态演示：

import React, { Component } from 'react';
import Box from '@mui/material/Box';
import Button from '@mui/material/Button';
import Typography from '@mui/material/Typography';
import Modal from '@mui/material/Modal';

const style = {
    position: 'absolute',
    top: '50%',
    left: '50%',
    transform: 'translate(-50%, -50%)',
    width: 400,
    bgcolor: 'background.paper',
    border: '2px solid #000',
    boxShadow: 24,
    p: 4
};

export class Contact extends Component {
    constructor(props) {
        super(props);
        this.state = {
            open: false,
            setOpen: false
        }
        this.handleOpen = this.handleOpen.bind(this);
        this.handleClose = this.handleClose.bind(this);
    }
    static displayName = Contact.name;
    handleOpen() { this.setState({ setOpen: true }); }
    handleClose() { this.setState({ setOpen: false }); }
 
    render() {

        return(
            <div>
                <div className="center">
                    <Button onClick={() => this.handleOpen()}>Contact us</Button>
                </div>
                <Modal open={() => this.state.open()} onClose={()=> this.handleClose()}
                aria-labelledby="modal-modal-title" aria-describedby="modal-modal-description">
                    <Box sx={style}>
                      <Typography id="modal-modal-title" variant="h6" component="h2">
                          Contact us
                      </Typography>
                      <Typography id="modal-modal-description" sx={{ mt: 2 }}>
                          Contact us at hello @ mycompany.com
                      </Typography>
                    </Box>
                </Modal>
            </div >
        );
    }
}

标签： javascriptreactjs

解决方案

您正在使用和更新两个不同的状态值open和setOpen. 这就是为什么它打开并且从不关闭的原因。更新了沙箱中的代码。另一个问题是您使用open={() => this.state.open()}的是模态状态，它总是返回 true。相反，您需要使用open={this.state.open}

这是完整的代码。

import React, { Component } from "react";
import Box from "@mui/material/Box";
import Button from "@mui/material/Button";
import Typography from "@mui/material/Typography";
import Modal from "@mui/material/Modal";

const style = {
  position: "absolute",
  top: "50%",
  left: "50%",
  transform: "translate(-50%, -50%)",
  width: 400,
  bgcolor: "background.paper",
  border: "2px solid #000",
  boxShadow: 24,
  p: 4
};

class Contact extends Component {
  constructor(props) {
    super(props);
    this.state = {
      open: false
    };
    this.handleOpen = this.handleOpen.bind(this);
    this.handleClose = this.handleClose.bind(this);
  }
  static displayName = Contact.name;
  handleOpen() {
    this.setState({ open: true });
  }
  handleClose() {
    this.setState({ open: false });
  }

  render() {
    return (
      <div>
        <div className="center">
          <Button onClick={this.handleOpen}>Contact us</Button>
        </div>
        <Modal
          open={this.state.open}
          onClose={this.handleClose}
          aria-labelledby="modal-modal-title"
          aria-describedby="modal-modal-description"
        >
          <Box sx={style}>
            <Typography id="modal-modal-title" variant="h6" component="h2">
              Contact us
            </Typography>
            <Typography id="modal-modal-description" sx={{ mt: 2 }}>
              Contact us at hello @ mycompany.com
            </Typography>
          </Box>
        </Modal>
      </div>
    );
  }
}

export default Contact;

推荐阅读