使用 react 和 EmailJs 在表单中通过 onSubmit 传递第二个参数

Posted 2023-03-16

【中文标题】使用 react 和 EmailJs 在表单中通过 onSubmit 传递第二个参数

【英文标题】：Passing a second argument through onSubmit in forms using react and EmailJs

【发布时间】：2021-09-05 00:08:03

【问题描述】：

我有一个完整的表单，其中包含其他组件以成功提交和验证，但现在我想连接到 Emailjs，以便我可以在我的实际 gmail 中接收电子邮件。这是 EmailJs 代码希望我添加到代码中的内容，但我不确定如何将 2 个参数一起传递并使其工作。

function sendEmail(e) 
    e.preventDefault();

    emailjs.sendForm('YOUR_SERVICE_ID', 'YOUR_TEMPLATE_ID', e.target, 'YOUR_USER_ID')
      .then((result) => 
          console.log(result.text);
      , (error) => 
          console.log(error.text);
      );
   

这是我的代码

import React from 'react'
import useForms from './useForms'
import validate from './validateInfo'

const FormContact = (submitForm) => 

const  handleChange, values, handleSubmit, errors = useForms(submitForm, validate);


return (
    <div className="form-content-right">

        <form action="" className="form" onSubmit=handleSubmit>
            <h6>Get in contact with us!</h6>

            <div className="form-inputs">
                <label htmlFor="name" className="form-label">
                   Full Name: 
                </label>
                <input id='name'
                    type="text" 
                    name='name' 
                    className="form-input" 
                    placeholder='Name'
                    value=values.name
                    onChange=handleChange
                />
                errors.name && <p>errors.name</p>
            </div>
            <div className="form-inputs">
                <label htmlFor="email" className="form-label">
                    Email Address:
                </label>
                <input id='email'
                    type="email" 
                    name='email' 
                    className="form-input" 
                    placeholder='Email'
                    value=values.email
                    onChange=handleChange 
                />
                errors.email && <p>errors.email</p>
            </div>
            <div className="form-inputs">
                <label htmlFor="number" className="form-label">
                    Contact Number:
                </label>
                <input id='number'
                    type="tel" 
                    name='number' 
                    className="form-input" 
                    placeholder='Contact number' />
            </div>
            <div className="form-inputs">
                <label htmlFor="country" className="form-label">
                    Country:
                </label>
                <input id='country'
                    type="country" 
                    name='country' 
                    className="form-input" 
                    placeholder='Country' 
                    value=values.country
                    onChange=handleChange
                />
                errors.country && <p>errors.country</p>
            </div>
            <div className="form-inputs">
                <label htmlFor="message" className="form-label">
                        Message:
                </label>
                    <textarea id='message'
                        type="message" 
                        name='message' 
                        className="form-input" 
                        placeholder='Enter message here' 
                        value=values.message
                        onChange=handleChange
                    />
            </div>
            <button className="form-input-btn" type='submit' >
                Contact Us
            </button>
        </form>

    </div>
)


export default FormContact

我需要 handleSubmit 才能让我的代码正常工作，但还需要在 onSubmit 中将“sendEmail”添加到相同的参数中

【参考方案1】：

您可以创建一个匿名函数来调用您需要的两个函数：

<form action="" className="form" onSubmit=(e) => handleSubmit(e); sendEmail(e); >