React 聯系表單問題 email js

Question

const [name, setName] = useState('');
const [email, setEmail] = useState('');
const [number, setNumber] = useState('');
const [message, setMessage] = useState('');



const service_id = 'xxxxx'
const template_id = 'xxxxx'
const user_id = 'xxxxx'
const orderDetails = {

    name: name,
    email: email,
    phone: number,
    message: message
}




const sendEmail = () => {
    emailjs.send(service_id, template_id, orderDetails, user_id);
}

 

 <form className="contactusinfo__form" >
                        <input type="text" placeholder='Your Name' required onChange={(e) => setName(e.target.value)} />
                        <input type="email" placeholder='Your E-mail' required onChange={(e) => setEmail(e.target.value)} />
                        <input type="number" placeholder='Your Number' required onChange={(e) => setNumber(e.target.value)} />
                        <textarea name="message" placeholder='Your Message' id="" cols="30" rows="5" required onChange={(e) => setMessage(e.target.value)} ></textarea>
                        <button style={{ fontSize: '16px', fontFamily: 'Lato' }} type='submit' onClick={sendEmail()}>
                            SEND
                        </button>
                    </form>

我正在嘗試使用 emailjs 從聯系表單發送 email 並遇到錯誤。 我早些時候讓它工作得很好，但現在我不知道我改變了什么。 我的問題是電子郵件與文本區域中的事件更改量同步。

處理聯系表的最佳做法是什么？

Answer 1

刪除按鈕上的 onClick 道具並在表單上添加 onSubmit 道具以觸發發送電子郵件 function，或刪除表單。 如果你想處理點擊按鈕發送 email 你應該用 onClick={sendEmail} 替換onClick={sendEmail()} onClick={sendEmail}

e.preventDefault() 是防止表單提交所必需的（在您的情況下會重新加載頁面）。

Answer 2

const [name, setName] = useState('');
const [email, setEmail] = useState('');
const [number, setNumber] = useState('');
const [message, setMessage] = useState('');



const service_id = 'xxxxx'
const template_id = 'xxxxx'
const user_id = 'xxxxx'
const orderDetails = {

    name: name,
    email: email,
    phone: number,
    message: message
}




const sendEmail = () => {
    emailjs.send(service_id, template_id, orderDetails, user_id);
}

 

 <form className="contactusinfo__form" >
                        <input type="text" placeholder='Your Name' required onChange={(e) => setName(e.target.value)} />
                        <input type="email" placeholder='Your E-mail' required onChange={(e) => setEmail(e.target.value)} />
                        <input type="number" placeholder='Your Number' required onChange={(e) => setNumber(e.target.value)} />
                        <textarea name="message" placeholder='Your Message' id="" cols="30" rows="5" required onChange={(e) => setMessage(e.target.value)} ></textarea>
                        <button style={{ fontSize: '16px', fontFamily: 'Lato' }} type='submit' onClick={sendEmail()}>
                            SEND
                        </button>
                    </form>

我正在嘗試使用 emailjs 從聯系表單發送 email 並遇到錯誤。 我之前它工作得很好，但現在我不知道我改變了什么。 我的問題是電子郵件與文本區域中的事件更改量同步。

處理我的聯系表的最佳做法是什么？