如何在React中实现点击按钮弹出表单弹窗并在提交后自动关闭

步骤1：改造Contact组件适配弹窗逻辑 #

你需要给Contact组件新增关闭弹窗的回调能力，同时添加弹窗容器结构：

import React, {useState} from 'react';
import './contactModal.css'

const initialFormValues = {
    firstName: '',
    lastName: '',
    email: '',
    phone: '',
    message: ''
}

// 新增接收onClose关闭回调
export default function Contact({ onClose }){

    const [contacts, setContacts] = useState([]);
    const [formValues, setFormValues] = useState(initialFormValues);

    const inputChange= (name, value) => {
        setFormValues({...formValues, [name]: value})
    }
    const onChange = e => {
        const {name, value} = e.target;
        inputChange(name, value);
    }
    const postNewContact = newContact => {
        setContacts([newContact, ...contacts])
        setFormValues(initialFormValues);
        // 提交成功后调用关闭弹窗方法
        onClose?.()
    }
    const formSubmit = () => {
        const newContact = {
            firstName: formValues.firstName.trim(),
            lastName: formValues.lastName.trim(),
            email: formValues.email.trim(),
            phone: formValues.phone.trim(),
            message: formValues.message.trim()
        }
        postNewContact(newContact)
    }
    const onSubmit = e => {
        e.preventDefault();
        formSubmit();
    }

    return (
        // 新增弹窗外层遮罩，点击遮罩关闭弹窗
        <div className="modal-mask" onClick={onClose}>
            {/* 弹窗内容区，阻止点击冒泡避免点内容也关闭 */}
            <div className="modal-content" onClick={e => e.stopPropagation()}>
                <div className='contact container'>
                    <h1>联系我们</h1>
                    <form id='contact-form' onSubmit={onSubmit}>
                        <div className='form-group inputs'>
                            <label>
                                名字:
                                <input 
                                type='text'
                                value={formValues.firstName}
                                onChange={onChange}
                                name="firstName"
                                />
                            </label>
                            <label>
                                姓氏:
                                <input 
                                type='text'
                                value={formValues.lastName}
                                onChange={onChange}
                                name="lastName"
                                />
                            </label>
                            <label>
                                邮箱:
                                <input 
                                type='email'
                                value={formValues.email}
                                onChange={onChange}
                                name="email"
                                />
                            </label>
                            <label>
                                手机号码:
                                <input 
                                type='text'
                                value={formValues.phone}
                                onChange={onChange}
                                name="phone"
                                />
                            </label>
                            <label>
                                留言:
                                <input 
                                type='text'
                                value={formValues.message}
                                onChange={onChange}
                                name="message"
                                />
                            </label>
                        </div>
                        <div className='form-group submit'>
                            <button id='contact-btn'>提交联系信息</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    )
}

步骤2：改造Footer组件控制弹窗显隐 #

给Footer添加弹窗显隐状态，点击Contact链接时触发弹窗显示：

import React, { useState } from 'react';
import Contact from './Contact'; // 替换为你实际的Contact组件路径
import './footer.css'

function Footer()
{
    // 新增控制弹窗显隐的状态
    const [isModalOpen, setIsModalOpen] = useState(false)

    return (
        <div className="Footer">
            <div className="container">
                <div className="row">

                    <div className="col">
                        <h4 className="block ">About Us</h4>
                    </div>

                    <div className="col">
                        {/* 给Contact添加点击事件，打开弹窗 */}
                        <h4 className="block" style={{cursor: 'pointer'}} onClick={() => setIsModalOpen(true)}>Contact</h4>
                    </div>

                    <div className="col">
                        <h4><a className="block" href={"https://www.cdc.gov/coronavirus/2019-ncov/faq.html"}>COVID-19 FAQ</a></h4>
                    </div>

                    <div className="col">
                        <h4 className="block"><a className="block" href={"https://www.cdc.gov/coronavirus/2019-ncov/if-you-are-sick/quarantine.html"}>CDC Guidelines</a></h4>
                    </div>

                </div>
            </div>
            {/* 弹窗状态为true时渲染Contact组件，传入关闭方法 */}
            {isModalOpen && <Contact onClose={() => setIsModalOpen(false)} />}
        </div>
    );
}

export default Footer;

步骤3：添加弹窗基础样式 #

新建contactModal.css文件，添加如下样式实现基础弹窗效果：

.modal-mask {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0,0,0,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.modal-content {
    background-color: #fff;
    padding: 2rem;
    border-radius: 8px;
    max-width: 500px;
    width: 90%;
}

以上代码实现后即可达成需求：点击Footer的Contact文字弹出表单，提交表单后弹窗自动关闭，点击遮罩也可以手动关闭弹窗。

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