React引用电子邮件表单

Question

我是一名音乐工程师，使用react构建个人网站。我试着做一个联系人表单，其中的人在输入字段中键入主题，在文本区域中键入消息，然后点击"联系"按钮，他们的邮件客户端打开的主题和电子邮件的正文分别填充了输入字段和文本区域的内容。问题是，我似乎无法将数据从我的反应refs传递到窗口。打开功能…电子邮件打开时，主题阅读"主题"，正文阅读"正文"。相关代码如下，任何帮助将不胜感激

import React, { useRef } from 'react';
import './index.css';
import * as parts from   './UIComponents.js'
const subjectRef = useRef(null);
const messageRef = useRef(null);
export class Email extends  React.Component {
goButton(i) {
return(<parts.ButtonFactory onClick={() => this.go()} value={i} />);
}
go() {
let subject = subjectRef.current.value;
let body = messageRef.current.value;
window.open('mailto:[e-mail]?subject=subject&body=body');
}
render() {
return (
<div className="email-form">
<div className="container">
<div className="input-group">
<label>Your Name:</label>
<input type="text" ref={subjectRef} />
<br />
<label>Detailed Message:</label>
<textarea rows="8" ref={messageRef} />
</div>
<div className="btn-group">
{this.goButton('REACH OUT')}
</div>
</div>
</div>
);
}
}

Answer 1

问题是你的go函数正在传递"body"one_answers";subject"作为字符串而不是作为变量。这就是为什么您的邮件客户端打开这些值。

如果你想传递变量，你可以使用字符串模板

go() {
let subject = subjectRef.current.value;
let body = messageRef.current.value;
window.open(`mailto:[e-mail]?subject=${subject}&body=${body}`);
}