javascript - 从 OnClick 按钮显示表单

Question

当我单击按钮时，我试图将表单显示为弹出窗口。我是 React 的新手，我真的不知道从哪里开始。

这是我要显示的 React 组件：

import React, {useState} from 'react';

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

export default function Contact(){

    //set up state
    const [contacts, setContacts] = useState([]);
    const [formValues, setFormValues] = useState(initialFormValues);

    //helper function to trach changes in the input
    const inputChange= (name, value) => {
        setFormValues({...formValues, [name]: value})
    }
    const onChange = e => {
        const {name, value} = e.target;
        inputChange(name, value);
    }
    //post a new contact to the backend eventually, right now just display the contact to the DOM
    const postNewContact = newContact => {
        setContacts([newContact, ...contacts])
        setFormValues(initialFormValues);
    }
    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='contact container'>
            <h1>This is the contact component</h1>
            <form id='contact-form' onSubmit={onSubmit}>
                <div className='form-group submit'>
                    <button id='contact-btn'>SUBMIT CONTACT INFO</button>
                </div>
                <div className='form-group inputs'>
                    <label>
                        First Name:
                        <input 
                        type='text'
                        value={formValues.firstName}
                        onChange={onChange}
                        name="firstName"
                        />
                    </label>
                    <label>
                        Last Name:
                        <input 
                        type='text'
                        value={formValues.lastName}
                        onChange={onChange}
                        name="lastName"
                        />
                    </label>
                    <label>
                        Email:
                        <input 
                        type='email'
                        value={formValues.email}
                        onChange={onChange}
                        name="email"
                        />
                    </label>
                    <label>
                        Phone Number:
                        <input 
                        type='text'
                        value={formValues.phone}
                        onChange={onChange}
                        name="phone"
                        />
                    </label>
                    <label>
                        Message:
                        <input 
                        type='text'
                        value={formValues.message}
                        onChange={onChange}
                        name="message"
                        />
                    </label>
                </div>
            </form>
        </div>
    )
}

当我单击“联系我们”链接时，我想将此组件显示为弹出窗口：

import React from 'react';
import './footer.css'

function Footer()
{

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

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

                    <div className="col">
                        <h4 className="block" >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>
        </div>
    );
}

export default Footer;

我将如何做到这一点？我希望使用以下表单在单击时显示弹出窗口，并且我希望在用户单击提交按钮时弹出窗口消失。

标签： javascriptreactjs

Answer 1

您可以使用 HTML + CSS + Javascript 创建弹出窗口，如链接 Custom Popup中所示，或使用任何 UI 框架（如Ant Design）并使用 Modal 组件。

btn.onclick = function() {
  modal.style.display = "block";
}