如何让我的模态在 x 秒内关闭？

Question

我正在使用 ReactJS 和 Bootstrap 模式。我可以很好地打开模式，但我希望它在 3 秒后关闭。

如下所示，我尝试了 setTimeout，但它没有关闭。我给了setTimeout一个handleClose的回调，但是在控制台记录之后，我可以看到handleClose没有被调用。

这里是 ItemDetailView 组件：

    import React, { Component } from 'react';
import { connect } from 'react-redux';
import { Card, CardImg, CardText, CardBody,
  CardTitle, CardSubtitle } from 'reactstrap';
import { addToCart } from '../actions/addToCartAction';
import './ItemDetailView.css';
import ItemAddedModal from './ItemAddedModal';


class ItemDetailView extends Component {
  constructor(props) {
    super(props);

    this.state = {
      modalOpen: false
    }
    // this.toggle = this.toggle.bind(this);
  };

  // toggle() {
  //   this.setState({
  //     modalOpen: !this.state.modalOpen
  //   });
  // };

  handleOpen = () => {
    console.log("Cart Open", this.state.modalOpen);
    this.setState({ 
      modalOpen: true 
    },() => {setTimeout(this.handleClose(), 3000)});
    // setTimeout(this.handleClose(), 3000);
  };

  handleClose = () => {
    this.setState({
      modalOpen: false 
    });
    console.log('handleClose fired!')
  };

  addToCartHandler = () => {
    this.props.addToCart(this.props.card);
    console.log('addToCart++', this.props.quantity);
    this.handleOpen()
    // this.setState({
    //   modalOpen: true
    // });
  };

  render() {
    if (!this.props.title) {
      return null;
    }

    return (
      <div className="detail-view-wrapper">
        <Card className="text-center detail-view-card">
          {/* <CardImg top width="100%" src={"/" + this.props.img} alt={this.props.title} /> */}
          <CardImg className="detail-view-img" top width="100%" src={"/" + this.props.img} alt={this.props.title} />
          <CardBody>
            <CardTitle className={"card-title"}>{this.props.title}</CardTitle>
            <CardSubtitle>${this.props.price}</CardSubtitle>
            <CardText>{this.props.description}</CardText>
            {/* <SvgIcon className="cart-icon" onClick={() => this.addToCartHandler()} >
              <AddShoppingCart />
            </SvgIcon> */}
            <button className= "add-to-cart-button" onClick={() => this.addToCartHandler()}>Add To Cart</button>
          </CardBody>
        </Card>
        <ItemAddedModal open={this.state.modalOpen} toggle={this.toggle} />
      </div>
    );
  }
}

const mapStateToProps = state => {
  if (!state.data.cardData) {
    return {
      title: null,
      img: null,
      description: null,
      price: null
    }
  }
  const card = state.data.cardData[state.card.id]
  return {
    card: card,
    title: card.title,
    id: card.id,
    img: card.img,
    description: card.description,
    price: card.price,
    quantity: 0
  };
}

export default connect(mapStateToProps, { addToCart })(ItemDetailView);

这里是 ItemAddedModal：

import React from 'react';
import { Modal, ModalHeader } from 'reactstrap';
import './ItemAddedModal.css';

class ItemAddedModal extends React.Component {

  render () {
    return (
      <div>
          <Modal className="item-added-modal" isOpen={this.props.open} toggle={this.props.toggle} className={this.props.className}>
            <ModalHeader className="item-added-modal-header">
              <p className="item-added-modal-p">Item Added To Cart</p>
            </ModalHeader>
          </Modal>
        </div>
    )
  };
}
export default ItemAddedModal;

Answer 1

要在设置状态后执行操作，我们需要将回调传递给 setState。

 this.setState({
  modalOpen: true
},()=>{
console.log(this.state.modalOpen);});