質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Email

Email(電子メール)とは、ネットワークを介してメッセージを送受信するシステム。インターネット上で利用するメールを、Emailと呼ぶ場合が多いです。 インターネットの普及に伴い、現在では一般的なサービスとなっています。文字の他にも、画像、音声、プログラムなどを送受信することが可能です。

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

Q&A

0回答

222閲覧

sendMailメソッドが発火しない。

taipon

総合スコア3

Email

Email(電子メール)とは、ネットワークを介してメッセージを送受信するシステム。インターネット上で利用するメールを、Emailと呼ぶ場合が多いです。 インターネットの普及に伴い、現在では一般的なサービスとなっています。文字の他にも、画像、音声、プログラムなどを送受信することが可能です。

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

0グッド

0クリップ

投稿2022/04/27 13:25

前提・実現したいこと

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

自分で調べたことや試したこと

下記の記事を参考にしているのですがうまくいきません。

https://zenn.dev/oira_riku/articles/00f6f4afe6500c#%E3%83%A1%E3%83%BC%E3%83%AB%E9%80%81%E4%BF%A1%E3%81%AE%E3%83%AD%E3%82%B8%E3%83%83%E3%82%AF%E9%83%A8%E5%88%86%E3%82%92%E4%BD%9C%E6%88%90

よろしくお願いいたします。。。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

mike2mike4

2022/04/27 14:58 編集

コードの中に onSubmit={(e) => onSubmit(e)} が見当たりませんが onClickだけだと押したと検知するだけでデータは送られません
taipon

2022/04/27 23:17

なるほどありがとうございます! 修正してみます!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問