Question

我已经安装了emailjs并配置了reactjs表单，如下所示

import * as emailjs from 'emailjs-com';
const ContactForm = ({ title, tagline }) => {
  const [inputs, setInputs] = useState({});

  const handleInputChange = (e) => {
    const { name, value } = e.target;
    setInputs({ ...inputs, [name]: value });
  };
  const onSubmit=(e)=>{
    e.preventDefault()// Prevents default refresh by the browser
    emailjs.send('gmail', "template_123412341234","#contact-form","user_12341234") 
    .then(result => {
    alert('Message Sent, I\'ll get back to you shortly', result.text);
    },
    error => {
    alert( 'An error occured, Plese try again',error.text)
    })
    }
  return (
    <>
      {title && (
        <ReactWOW animation="fadeTop" delay="0.1s">
          <h2 className="text-uppercase font-700">{title}</h2>
        </ReactWOW>
      )}
      {tagline && (
        <ReactWOW animation="fadeTop" delay="0.1s">
          <h4 className="text-uppercase">- {tagline} -</h4>
        </ReactWOW>
      )}
      <form
        name="contact-form"
        id="contact-form"
        method="POST"
        onSubmit={onSubmit}
        className="mt-50"
      >
        <div className="messages"></div>
        <ReactWOW animation="fadeTop" delay="0.1s">
          <div className="form-group">
            <label className="sr-only" htmlFor="name">
              Name
            </label>
            <input
              type="text"
              name="name"
              className="form-control"
              id="name"
              required="required"
              placeholder="Your Name"
              data-error="Your Name is Required"
              value={inputs.name}
              onChange={handleInputChange}
            />
            <div className="help-block with-errors mt-20"></div>
          </div>
        </ReactWOW>
        <ReactWOW animation="fadeTop" delay="0.2s">
          <div className="form-group">
            <label className="sr-only" htmlFor="email">
              Email
            </label>
            <input
              type="email"
              name="email"
              className="form-control"
              id="email"
              placeholder="Your Email"
              required="required"
              data-error="Please Enter Valid Email"
              value={inputs.email}
              onChange={handleInputChange}
            />
            <div className="help-block with-errors mt-20"></div>
          </div>
        </ReactWOW>
        <ReactWOW animation="fadeTop" delay="0.3s">
          <div className="form-group">
            <label className="sr-only" htmlFor="message">
              Message
            </label>
            <textarea
              name="message"
              className="form-control"
              id="message"
              rows="7"
              placeholder="Your Message"
              required
              data-error="Please, Leave us a message"
              value={inputs.message}
              onChange={handleInputChange}
            ></textarea>
            <div className="help-block with-errors mt-20"></div>
          </div>
        </ReactWOW>
        <ReactWOW animation="fadeTop" delay="0.4s">
          <button
            type="submit"
            name="submit"
            className="btn btn-color btn-circle"
          >
            Book Now
          </button>
        </ReactWOW>
      </form>

但是当我提交联系表格时，我得到了错误输出信息。在Chrome控制台中，我看到了

index.js:1 Warning: A component is changing an uncontrolled input of type text to be controlled. Input elements should not switch from uncontrolled to controlled (............

一旦我提交我就会看到

Failed to load resource: the server responded with a status of 400 (bad request)

我尝试过

更改emailjs帐户
send（）和sendForm（）两者

但以上方法均无效，仍然出现相同的错误。非常感谢您对解决此问题的任何帮助。谢谢！

从EMAILJS和reactsjs发送电子邮件时出错

0 个答案: