problems with Email JS + AntD

Question

最近遇到了一个问题。我使用AntD创建了一个表单，使用EmailJs库发送电子邮件。问题是，来自AntD的组件不发送任何东西到电子邮件，但如果你只是使用，一切都很好。其他组件都很好。也许有人知道怎么解决这个问题?

这是我的"代码">

const ContactUs = (props) => {
function sendEmail(e) {
e.preventDefault();
emailjs.sendForm('There is a userID and serverID that I do not want to show')
.then((result) => {
console.log(result.text);
}, (error) => {
console.log(error.text);
});
e.target.reset()
}

return (
<Content style={{margin: '0 16px'}}>
<Breadcrumb style={{margin: '16px 0'}}>
<Breadcrumb.Item> </Breadcrumb.Item>
</Breadcrumb>
<div className="site-layout-background" style={{padding: 24, minHeight: 360}}>
<div className="container">
<form onSubmit={sendEmail}>
<div >
<Input placeholder="Email" name={"email"} />
</div>
<div>
<Input placeholder="Full name" name={"full_name"}   />
</div>
<div>
<Select name="course_level" defaultValue="Course Level"  >
<Option value="a1">A1</Option>
<Option value="a2">A2</Option>
<Option value="b1">B1</Option>
<Option value="b2">B2</Option>
</Select>
</div>
<div>
<Input placeholder="Basic usage" name={"telephone"}  />
</div>
<div>
<Input placeholder="Basic usage" name={"add_inform"}  />
</div>
<div>
<Button type="primary" htmlType="submit" style={{marginRight: "10px"}}>
Submit
</Button>
</div>
</form>
</div>
</div>
</Content>
);

Answer 1

Email-js需要4个参数，如官方文档所示:

emailjs.sendForm('YOUR_SERVICE_ID', 'YOUR_TEMPLATE_ID', form.current, 'YOUR_PUBLIC_KEY')

第三个参数应该是HTML表单元素(您正在使用的表单)。你可以通过react中的useRef钩子来实现。

import React, { useRef } from 'react';
const ContactUs = (props) => {
const form=useRef();
function sendEmail(e) {
e.preventDefault();
emailjs.sendForm(
'your_service_id',
'your_template_id',
form.current,
'your_public_key'
)
.then((result) => {
console.log(result.text);
}, (error) => {
console.log(error.text);
});
e.target.reset()
}
return (
<form ref={form} onSubmit={sendEmail}>
....
</form>
)
}
export default ContactUs;