我將如何在用戶點擊提交后清除 EmailJS 表單？

Question

目前，如果用戶點擊發送，唯一知道它是否有效的方法是點擊按鈕 animation，並且只能確定他們是否檢查了頁面並在控制台中看到了“確定”消息。

我想至少清除所有輸入字段，讓他們知道它有效。 為了以防萬一，下面是整個 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

Answer 1

在每個上放一個 ref，然后執行：

theRef.current.value = "";

對於每個，或將 state 綁定到 React 的 beta 文檔中看到的每個輸入： https://beta.reactjs.org/learn/managing-state#reacting-to-input-with-state

Answer 2

這個答案有點晚了，但希望這對其他人有幫助。 由於您使用的是 Email.js，因此您可以在 then((result)) 之后使用 reset

這是它應該是什么樣子的示例：

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

希望這可以幫助。