javascript 在用户点击提交后,我如何清除EmailJS表单?

j9per5c4  于 2023-02-02  发布在  Java
关注(0)|答案(2)|浏览(121)

目前,如果用户点击发送,唯一知道它是否工作的方法是按钮点击动画,只有当他们检查页面并在控制台中看到“OK”消息时才能确定。
我想至少清除所有的输入字段,让他们知道它的工作。以下是整个Email.js组件,以防万一。
我希望这是足够的信息来帮助我,EmailJS一直非常有帮助,工作出色,但它不是我的同龄人,我有经验,所以我有点卡住了。

import React, { useRef } from 'react';
import emailjs from '@emailjs/browser';
import { Link } from 'react-router-dom';
import './Email.css';

const Email = () => {
    const form = useRef();

    const sendEmail = (e) => {
        e.preventDefault();

        emailjs.sendForm(process.env.REACT_APP_SERVICE_ID, process.env.REACT_APP_TEMPLATE_ID, form.current, process.env.REACT_APP_USER_ID)
        .then((result) => {
            console.log(result.text);
        }, (error) => {
            console.log(error.text);
        });
    };
    
    return (
        <div className="Email">
            <div className="nav">
                <Link to="/" className="Home">Home</Link>
            </div>
            <h1>Email Me!</h1>
            <form ref={form} onSubmit={sendEmail}>
                <div>
                <label>Name:</label>
                <input className="info-box" type="text" name="user_name" />
                </div>
                <div>
                <label>Email:</label>
                <input className="info-box" type="email" name="user_email" />
                </div>
                <div>
                <textarea placeholder="Message" name="message" className="Message"/>
                </div>
                <div classname="Button-container">
                <input className="Button" type="submit" value="Send" />
                </div>
            </form>
            <Link to="/resume" className="Back">Back</Link>
        </div>
    );
};
export default Email
pw9qyyiw

pw9qyyiw1#

在每个对象上放置一个引用,然后执行以下操作:

theRef.current.value = "";

对于每个,或将状态绑定到React测试版文档中的每个输入:https://beta.reactjs.org/learn/managing-state#reacting-to-input-with-state

0ve6wy6x

0ve6wy6x2#

这个答案有点晚了,但希望这能帮助其他人。因为你使用的是Email.js,你可以在. then((result))之后使用reset
下面是它应该是什么样子的一个例子:

.then(
    (result) => {
      console.log(result.text);
      // Clears form/inputs after button is Selected
      form.current.reset();
    }

希望这个有用。

相关问题