前提・実現したいこと
sendMailメソッドを発火させたい。
発生している問題・エラーメッセージ
const sendMail: (e: FormEvent<HTMLFormElement>) => Promise<void>
1 個の引数が必要ですが、0 個指定されました。ts(2554)
Form.tsx(11, 27): 'e' の引数が指定されていません。
というエラーが出ます。
該当のソースコード
react
1import React, { FormEvent, useState } from "react"; 2import { init, send } from "@emailjs/browser"; 3 4const Form = () => { 5 const [username, setUserName] = useState(""); 6 const [company, setCompany] = useState(""); 7 const [mail, setMail] = useState(""); 8 const [title, setTitle] = useState(""); 9 const [message, setMessage] = useState(""); 10 11 const sendMail = async (e: FormEvent<HTMLFormElement>) => { 12 e.preventDefault(); 13 14 const userID = process.env.REACT_APP_USER_ID; 15 const serviceID = process.env.REACT_APP_SERVICE_ID; 16 const templateID = process.env.REACT_APP_TEMPLATE_ID; 17 if ( 18 userID !== undefined && 19 serviceID !== undefined && 20 templateID !== undefined 21 ) { 22 init(userID); 23 24 const template_param = { 25 to_username: username, 26 company: company, 27 from_email: mail, 28 title: title, 29 message: message, 30 }; 31 32 try { 33 await send(serviceID, templateID, template_param); 34 alert("送信成功"); 35 } catch (error) { 36 alert(error); 37 } 38 } 39 }; 40 const handleClick = (e: { preventDefault: () => void }) => { 41 sendMail(); 42 }; 43 44 const handleCanceled = () => { 45 setUserName(""); 46 setCompany(""); 47 setMail(""); 48 setMessage(""); 49 setTitle(""); 50 }; 51 52 const disableSend = 53 username === "" || mail === "" || title === "" || message === ""; 54 55 return ( 56 <div className="form-photo"> 57 <div className="form-main"> 58 <h2 className="form-title">お問い合わせ</h2> 59 <p className="form-text"> 60 お問い合わせは、下記のフォームからお願いします。 61 </p> 62 <form className="form-input"> 63 <div className="form-group"> 64 <input 65 type="text" 66 id="nameForm" 67 placeholder="name" 68 className="formInput" 69 value={username} 70 onChange={(e) => setUserName(e.target.value)} 71 /> 72 </div> 73 74 <div className="form-group"> 75 <input 76 type="text" 77 id="companyNameForm" 78 placeholder="company" 79 className="formInput" 80 value={company} 81 onChange={(e) => setCompany(e.target.value)} 82 required 83 /> 84 </div> 85 86 <div className="form-group"> 87 <input 88 type="email" 89 id="mailForm" 90 placeholder="mail" 91 className="formInput" 92 value={mail} 93 onChange={(e) => setMail(e.target.value)} 94 /> 95 </div> 96 97 <div className="form-group"> 98 <input 99 type="text" 100 id="mailTitleForm" 101 placeholder="title" 102 className="formInput" 103 value={title} 104 onChange={(e) => setTitle(e.target.value)} 105 /> 106 </div> 107 <div className="form-group"> 108 <textarea 109 id="mailContentForm" 110 placeholder="message" 111 className="formInput" 112 value={message} 113 onChange={(e) => setMessage(e.target.value)} 114 rows={5} 115 /> 116 </div> 117 <div className="btns"> 118 <div> 119 <button onClick={handleClick} disabled={disableSend}> 120 <strong>お問い合わせを送信する</strong> 121 </button> 122 </div> 123 <div> 124 <button onClick={handleCanceled}> 125 <strong>キャンセル</strong> 126 </button> 127 </div> 128 </div> 129 </form> 130 </div> 131 </div> 132 ); 133}; 134 135export default Form; 136
自分で調べたことや試したこと
下記の記事を参考にしているのですがうまくいきません。
よろしくお願いいたします。。。
あなたの回答
tips
プレビュー