如何使用 EmailJS 修复无后端表单的 React 联系表单？

Question

我正在尝试使用 EmailJS 在我的开发组合中添加工作电子邮件联系表单，因为没有后端。我已按照指示在代码中包含 e.preventDefault 语句，但是当提交表单时，页面似乎会刷新并将用户送回网站的主页。我已经做了多次测试，但从未收到任何电子邮件。我在控制台中没有收到任何错误。任何帮助将不胜感激！

这是我在 github 上的代码库的链接：https://github.com/charliec1665/charliec-dev-portfolio

具体联系组件：https://github.com/charliec1665/charliec-dev-portfolio/blob/main/src/components/Contact/index.js

以下是用于处理提交的钩子代码：

    // handle form submission and loading state
    const [formSent, setFormSent] = useState(false);
    const [isLoading, setIsLoading] = useState(false);
    const form = useRef();

    const handleSubmit = e => {
        e.preventDefault();
        const req = {
            from_name: name,
            from_email: email,
            message: message
        }
        setIsLoading(true);
        sendEmail(req);
    }

    const sendEmail = req => {
        const params = req;
        window.emailjs.send('portfolio_contact', 'template_suo050u', params, 'BfYQUzIt-ih1oyqmY')
            .then(res => {
                setIsLoading(false);
                setFormSent(true);
                console.log(res);
            }).catch(e => {
                setIsLoading(false);
            });
    }

这是包含以下形式的列的 JSX：

                    <Col>
                        {isLoading ?
                            <Spinner animation='border' variant='info'/>
                            : formSent ? (
                                <div className='d-flex justify-content-center'>
                                    <p className='success-text'> Your message has been sent! </p>
                                </div>
                            )
                            : <></>
                        }
                        <Form>
                            <Form.Group id='contact-form' ref={form} onSubmit={handleSubmit} className='my-3'>
                                {/* name input */}
                                <div className='d-flex justify-content-center'>
                                    <Form.Control type='text' placeholder='Name' name='name' autoComplete='name' defaultValue={name} onBlur={handleChange} style={{ width: '65%' }} />
                                </div>
                                {/* email input */}
                                <div className='my-3 d-flex justify-content-center'>
                                    <Form.Control type='email' placeholder='Email' name='email' autoComplete='email' defaultValue={email} onBlur={handleChange} style={{ width: '65%' }} />
                                </div>
                                {/* message text area */}
                                <div className='my-3 d-flex justify-content-center'>
                                    <Form.Control as='textarea' placeholder='Tell me about your project' name='message' rows={5} defaultValue={message} onBlur={handleChange} style={{ width: '65%' }} />
                                </div>
                                {/* if errorMessage print errorMessage text to alert user */}
                                {errorMessage && (
                                    <div className='my-3 d-flex justify-content-center'>
                                        <p className='error-text'>{errorMessage}</p>
                                    </div>
                                )}
                                <div className='my-3 d-flex justify-content-center'>
                                    <Button type='submit' className='btn'>Send</Button>
                                </div>
                            </Form.Group>
                        </Form>
                    </Col>

Answer 1

添加正式答案——大多数 React

<Form>

组件都遵循原始

<form>

元素的 HTML5 规范的约定。通常，

onSubmit

会存在于

<Form>

上。看来您将其添加到

<Form.Group>

中是行不通的。

如果我们深入研究react-bootstrap的代码（我看到的是您用于表单组件的代码，我们可以看到

<FormGroup>

组件实际上只是幕后的一个div。