关闭按钮不适用于 react-bootstrap 模态组件

Question

我正在尝试使用 react-bootstrap 模式显示另一个组件并反应 state。 我正在遵循 react-bootstrap 模态代码并尝试以我自己的方式自定义 state。 我能够创建 state 以在不使用 React.useStae 的情况下打开模式。 但问题是当我单击关闭按钮时模式没有关闭。 那么，如何解决 state 的这个问题？

这是我正在关注的 react-bootstrap 模式代码：

这是我试图在模态中打开另一个组件的代码。 但关闭 btn 不起作用：

import React, { Component, useState } from "react";
import { Link } from "react-router-dom";
//COMPONENTS
import { Container, Row, Col, Modal, Button } from "react-bootstrap";
import FeatureCard from "../../widgets/ShoppingCards/FeatureCard/FeatureCard";
import AllDressHeader from "../../widgets/AllDressHeader/AllDressHeader";
import ProductCard from "../../widgets/ShoppingCards/ProductCard/ProductCard";
import Slider from "react-slick";

//Images
import ShirtHeader from "../../../assets/Shirts/header-new.jpg";
import img from "../../../assets/Shirts/A-unsplash.jpg";
import img2 from "../../../assets/Shirts/ocean-shirt.jpg";
import img3 from "../../../assets/Shirts/L-unsplash.jpg";
import img4 from "../../../assets/Shirts/denim.jpg";
import img5 from "../../../assets/Shirts/R-unsplash.jpg";
import img6 from "../../../assets/Shirts/P-denim.jpg";
import img7 from "../../../assets/Shirts/Q-unsplash.jpg";
import img8 from "../../../assets/Shirts/Y-unsplash.jpg";
import img9 from "../../../assets/Shirts/Mens-Popover.jpg";
import img10 from "../../../assets/Shirts/blur-shirt.jpg";
import shirts from "../../../assets/Shirts/A-unsplash.jpg";

class Shirts extends Component {
  state = {
    whichComponentToShow: "FeatureCard",
    show: false,
    setShow: false,
  };

  onClick = () => {
    this.setState({ whichComponentToShow: "ProductCard", show: true });
  };

  handleClose = () => {this.setState({setShow:false})};
  handleShow = () =>{this.setState({setShow:true})};

  render() {
    const featureCard = (
      <FeatureCard
        OnClick={this.onClick}
        image={img}
        title="Sky Blue"
        price="9$"
      />
    );
    const productCard = (
      <ProductCard image={shirts} title="Sky Blue" price="9$" add="shirt" />
    );

    //WHICH COMPONENT TO SHOW
    const ShowComponent = () => {
      if (this.state.whichComponentToShow === "FeatureCard") {
        return <div>{featureCard}</div>;
      } else if (this.state.whichComponentToShow === "ProductCard") {
        return (
          <div>
            <Modal
              show={this.state.show}
              onHide={this.handleClose}
              centered
              size="xl"
            >
              <Modal.Header closeButton></Modal.Header>
              <Modal.Body>
                <Container fluid>
                  <Row>
                    <Col lg={12}> {productCard}</Col>
                  </Row>
                </Container>
              </Modal.Body>
              <Modal.Footer>
                <Button variant="secondary" onClick={this.handleClose}>
                  Close
                </Button>
              </Modal.Footer>
            </Modal>
          </div>
        );
      }
    };

   
    return (
      <div className="Shirts" style={{ margin: "3rem 0rem" }}>
        <div>
          <AllDressHeader
            Image={ShirtHeader}
            h1="SHIRTS FOR MEN"
            para="Id adipisicing elit adipisicing Lorem. Laborum deserunt laboris ex aliqua deserunt ipsum irure culpa pariatur in esse esse quis. Laboris incididunt enim velit reprehenderit irure. Do est deserunt sint."
            h2="CHOOSE YOUR FAVOURITE SHIRT NOW"
          />
        </div>
        <Container>
          <Row>
            <div>{ShowComponent()}</div>

            <Col>
              <FeatureCard image={img2} title="Beach Light" price="25.50$" />
            </Col>
            <Col>
              <div>
                <FeatureCard
                  image={img3}
                  title="Official Formal"
                  price="9.99$"
                />
              </div>
            </Col>
            <Col>
              <div>
                <FeatureCard image={img4} title="Denim" price="19$" />
              </div>
            </Col>
          </Row>
          <Row>
            <Col>
              <div>
                <FeatureCard image={img5} title="Red Black" price="12$" />
              </div>
            </Col>
            <Col>
              <div>
                <FeatureCard
                  image={img6}
                  title="Blue White Denim"
                  price="56$"
                />
              </div>
            </Col>
            <Col>
              <div>
                <FeatureCard
                  image={img7}
                  title="White Long Sleeve"
                  price="8$"
                />
              </div>
            </Col>
            <Col>
              <div>
                <FeatureCard image={img8} title="Blue Dotted" price="9.50$" />
              </div>
            </Col>
          </Row>
        </Container>
      </div>
    );
  }
}

export default Shirts;

Answer 1

您的模态引用 this.state.show，但您的 handleCLose/Show 函数正在设置 this.state.setShow。

相反，您应该设置“显示”

  handleClose = () => {this.setState({show:false})};
  handleShow = () =>{this.setState({show:true})};

您正在查看的示例是一个功能组件，其中 setShow 是 useState 挂钩的突变方法。 您正在使用一个基于类的组件，该组件使用 setState 来改变其 state。