handleOnClickを取得したい。

react,typescriptでEmail.jsのサービスを利用してお問い合わせホームをつくろうとしています。

実現したいこと

エラーメッセージ
名前 'handleOnClick' が見つかりません。ts(2304)

react

import React,{useState} from 'react';
import { init, send } from "emailjs-com";

  const Form = () => {
  const [username, setUserName] = useState('');
  const [company ,setCompany] = useState('');
  const [mail, setMail] = useState('');
  const [title, setTitle] = useState('');
  const [message, setMessage] = useState('');

  const sendMail = () => {
      const userID = process.env.REACT_APP_USER_ID;
      const serviceID = process.env.REACT_APP_SERVICE_ID;
      const templateID = process.env.REACT_APP_TEMPLATE_ID;

      if(
        userID !== undefined &&
        serviceID !== undefined &&
        templateID !== undefined)
      {
       init(userID);

       const template_param = {
         to_username: username,
         company: company,
         from_email: mail,
         title: title,
         message: message,
       };

       send(serviceID, templateID,template_param).then(() => {
         window.alert("お問い合わせを送信いたしました。");

         setUserName('');
         setCompany('');
         setMail('');
         setMessage('');
         setTitle('');
       });

      const handleOnClick = (e: { preventDefault: () => void; }) =>{
        e.preventDefault();
         sendMail()
      }

       const handleCanceled = () => {
         setUserName('');
         setCompany('');
         setMail('');
         setMessage('');
         setTitle('');
       }

       const disableSend = username === '' || mail === '' || title === '' || message === '';
      }
  }


  return (
    <div>
      <h2>お問い合わせ</h2>
      <p>お問い合わせは、下記のフォームからお願いします。</p>
      <form>
          <div>
            <label htmlFor="nameForm">ご氏名：</label>
          </div>
          <input type="text" id="nameForm" className="formInput" value={username} onChange={(e) => setUserName(e.target.value)}/>
          <div>
            <label htmlFor="companyNameForm">会社名：</label>
          </div>
          <input type="text" id="companyNameForm" className="formInput" value={company} onChange={(e) => setCompany(e.target.value)}
           required />
          <div>
            <label htmlFor="mailForm">メールアドレス：</label>
          </div>
          <input type="email" id="mailForm" className="formInput" value={mail} onChange={(e) => setMail(e.target.value)} />
          <div>
            <label htmlFor="mailTitleForm">件名：</label>
          </div>
          <input type="text" id="mailTitleForm" className="formInput" value={title} onChange={(e) => setTitle(e.target.value)} />
          <div>
            <label htmlFor="mailContentForm">お問い合わせ内容：</label>
          </div>
          <textarea  id="mailContentForm" className="formInput" value={message} onChange={(e) => setMessage(e.target.value)}
           rows={5} />
          <div className="btns">
            <div>
              <button onClick={handleOnClick}>
                <strong>お問い合わせを送信する</strong>
                </button>
            </div>
            <div>
              <button>
                <strong>キャンセル</strong>
                </button>
            </div>
          </div>
        </form>
    </div>
  )
}

export default Form```

試したこと

コードを打ち直した。
vscodeを再起動したがうまくいかなかった。

↓のページを参考に作成しています。
https://zenn.dev/azunasu/articles/3a49cc1a8c6839

行動規範の内容に同意します

回答1件

ベストアンサー

こちらの原因について、sendMailの中にhandleOnClickが入ってしまっているため、起きているエラーだと思います。

js
1const sendMail = () => {
2      // その他の処理
3      const handleOnClick = (e: { preventDefault: () => void; }) =>{
4        e.preventDefault();
5         sendMail()
6      }
7  }

解決方法としては、クリックなどの処理でsendMailで直接行うものではない場合、以下のように関数をFormの関数直下に入れればよいと思います。

js
1const sendMail = () => {
2      // その他の処理
3}
4
5const handleOnClick = (e: { preventDefault: () => void; }) =>{
6   e.preventDefault();
7   sendMail()
8}