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

Question

我有一个完整的表单，其中包含其他组件以成功提交和验证，但现在我想连接到 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”添加到相同的参数中

Answer 1

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

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