React中点击Add product按钮时如何关闭模态窗口？

针对你遇到的点击「Add product」按钮无法关闭reactjs-popup模态框的问题，有两种简单的解决方案：

方案一：利用reactjs-popup内置的关闭方法 #

reactjs-popup的modal模式会自动向子组件传递close函数，直接在子组件中接收并调用即可：

修改CreateProduct组件 #

import React from 'react';
import {useDispatch} from "react-redux";
import {addProductAction} from "../action/productsAction";
import {ConfigProduct} from "../Utils/configProduct";
import '../css/popup.css'
import '../css/flex.css'
import {Button} from "react-bootstrap";

// 接收Popup传递的close方法
const CreateProduct = ({ close }) => {

    const dispatch = useDispatch()
    const newProduct = new ConfigProduct()
    
    function addProd() {
        dispatch(addProductAction(newProduct))
        close() // 调用关闭方法关闭模态框
    }
    
    return (
            <div className = "popup">
                <h2  style={{textAlign: "center", color: "red"}}>New product</h2>
                <input className="item" placeholder="id" onChange={e => newProduct.idProd = e.target.value}/>
                <input className="item" placeholder="info" onChange={e => newProduct.name = e.target.value}/>
                <input className="item" placeholder="price" onChange={e => newProduct.infoProd = e.target.value}/>
                <input className="item" placeholder="date" onChange={e => newProduct.price = e.target.value}/>
                <input className="item" placeholder="enter url" onChange={e => newProduct.date = e.target.value}/>
                <p>
                    <Button onClick={addProd}>Add product</Button>
                </p>
            </div>
    );
};

export default CreateProduct;

Main组件无需修改，Popup会自动将close函数传递给子组件CreateProduct。

方案二：手动维护模态框的显示状态 #

通过在Main组件中维护isOpen状态，控制模态框的显示与隐藏，适合需要更灵活控制模态框的场景：

修改Main组件 #

import React, { useState } from 'react';
import CatalogProducts from "./CatalogProducts";
import Info from "./Info";
import CreateProduct from "./CreateProduct";
import {Button} from 'react-bootstrap';
import Popup from 'reactjs-popup';
import 'reactjs-popup/dist/index.css';
import '../css/popup.css'

const Main = () => {
    // 维护模态框的显示状态
    const [isOpen, setIsOpen] = useState(false);

    // 关闭模态框的方法
    const closeModal = () => setIsOpen(false);
    
    return (
        <div>
            <div className="d-flex justify-content-between" style={{ width: '33rem', margin: '10px' }}>
                <Popup 
                    contentStyle={{width: "unset", backgroundColor: "red", border: "none", background: "none"}}
                    trigger={<Button onClick={() => setIsOpen(true)}> Add </Button>} 
                    modal
                    open={isOpen}
                    onClose={closeModal}
                >
                    {/* 将关闭方法传递给CreateProduct */}
                    <CreateProduct onClose={closeModal}/>
                </Popup>
                <input placeholder={'search'}/>
                <span>sort by</span>
                <input/>
            </div>
            <CatalogProducts></CatalogProducts>
            <Info></Info>
        </div>
    );
};

export default Main;

修改CreateProduct组件 #

import React from 'react';
import {useDispatch} from "react-redux";
import {addProductAction} from "../action/productsAction";
import {ConfigProduct} from "../Utils/configProduct";
import '../css/popup.css'
import '../css/flex.css'
import {Button} from "react-bootstrap";

// 接收父组件传递的onClose方法
const CreateProduct = ({ onClose }) => {

    const dispatch = useDispatch()
    const newProduct = new ConfigProduct()
    
    function addProd() {
        dispatch(addProductAction(newProduct))
        onClose() // 调用关闭方法
    }
    
    return (
            <div className = "popup">
                <h2  style={{textAlign: "center", color: "red"}}>New product</h2>
                <input className="item" placeholder="id" onChange={e => newProduct.idProd = e.target.value}/>
                <input className="item" placeholder="info" onChange={e => newProduct.name = e.target.value}/>
                <input className="item" placeholder="price" onChange={e => newProduct.infoProd = e.target.value}/>
                <input className="item" placeholder="date" onChange={e => newProduct.price = e.target.value}/>
                <input className="item" placeholder="enter url" onChange={e => newProduct.date = e.target.value}/>
                <p>
                    <Button onClick={addProd}>Add product</Button>
                </p>
            </div>
    );
};

export default CreateProduct;

两种方案都能实现点击「Add product」按钮后立即关闭模态框的需求，可根据实际场景选择。

内容的提问来源于stack exchange，提问作者Aleksandr