React表单提交后如何清空输入框？含EmailJS相关问题

为啥去掉event.preventDefault()就收不到邮件？ #

浏览器表单默认提交行为是刷新页面，而EmailJS的send是异步操作——页面一刷新，还在运行的发送请求会直接被中断，自然发不出邮件。所以必须保留event.preventDefault()，阻止页面刷新，让邮件发送的异步请求能完整执行。

怎么实现提交后清空表单？ #

不用额外创建变量存数据，直接在邮件发送成功后重置表单的状态就行。EmailJS的send方法返回Promise，用async/await或者.then()处理成功后的逻辑都可以。

修改后的代码示例： #

function myForm(){
    const [formData, setFormData] = React.useState({
        fullName: "",
        emailAddress: "",
    });

    // 补上handleChange的event参数，原代码漏写会报错
    function handleChange(event){
        const {name, value} = event.target;
        setFormData((prevFormData) => ({
            ...prevFormData,
            [name]: value
        }));
    }

    // 用async/await确保发送成功后再清空表单
    async function handleSubmit(event){
        event.preventDefault();
        try {
            // 调用EmailJS的send方法（假设已正确导入）
            await send(formData);
            // 发送成功后重置表单数据
            setFormData({
                fullName: "",
                emailAddress: ""
            });
        } catch (error) {
            console.error("邮件发送失败：", error);
            // 可选：添加前端错误提示，比如弹窗告知用户
        }
    }

    return (
        <form onSubmit={handleSubmit}>
            {/* 必须给input加name属性，和state字段对应，否则handleChange无法正确更新状态 */}
            <input 
                type="text" 
                name="fullName"
                value={formData.fullName} 
                onChange={handleChange}
            />
            <input 
                type="email" 
                name="emailAddress"
                value={formData.emailAddress} 
                onChange={handleChange}
            />
            <input type="submit" value="Submit"/>
        </form>
    )
}

关键修复点： #

• handleChange必须接收event参数：原代码漏写会导致运行报错，现在补上。
• input添加name属性：和state中的fullName、emailAddress一一对应，确保[name]: value能正确更新对应字段的状态。
• 发送成功后重置state：邮件发送完成后，调用setFormData把所有字段设为空字符串，由于是受控组件，表单内容会自动同步清空。

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