目前,如果用户点击发送,唯一知道它是否工作的方法是按钮点击动画,只有当他们检查页面并在控制台中看到“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
2条答案
按热度按时间pw9qyyiw1#
在每个对象上放置一个引用,然后执行以下操作:
对于每个,或将状态绑定到React测试版文档中的每个输入:https://beta.reactjs.org/learn/managing-state#reacting-to-input-with-state
0ve6wy6x2#
这个答案有点晚了,但希望这能帮助其他人。因为你使用的是Email.js,你可以在. then((result))之后使用reset
下面是它应该是什么样子的一个例子:
希望这个有用。