EmailJs 和表单验证问题，React答案

【问题标题】：EmailJs and Form Validation problem, ReactEmailJs 和表单验证问题，React
【发布时间】：2021-03-24 05:12:01
【问题描述】：

我在通过 EmailJs 在 React 中发送电子邮件时遇到问题。当我验证表单并且所有错误消失时，表单仅在第二次单击后才发送电子邮件，我真的不知道为什么会发生这种情况。请帮忙

const useForm = (callback, validate) => {
  const [values, setValues] = useState({
    title: "",
    email: "",
    message: "",
  });
  const [errors, setErrors] = useState({});
  const [send, setSend] = useState(false);
  const [isSubmiting, setIsSubmiting] = useState(false);

  useEffect(() => {
    if (Object.keys(errors).length === 0) {
      if (isSubmiting) {
        setSend(true);
      }
    }
  }, [errors]);

  const handleChange = (e) => {
    const { name, value } = e.target;
    setValues({
      ...values,
      [name]: value,
    });
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    setErrors(validate(values));
    setIsSubmiting(true);
    if (send) {
      emailjs
        .sendForm(
          "service",
          "templatekey",
          e.target,
          "userkey"
        )
        .then(
          (result) => {
            console.log(result.text);
          },
          (error) => {
            console.log(error.text);
          }
        );
      e.target.reset();
    }
  };

  return { handleChange, values, handleSubmit, errors };
};

export default useForm;

【问题讨论】：

分享错误以及代码中有趣或您认为错误所在的部分。

标签： javascript reactjs forms email

【解决方案1】：

在将 setErrors(validate(values)) 和 setIsSubmiting(true) 移动到 handleChange 之后，它对我来说很好:)

const handleChange = (e) => {
const { name, value } = e.target;
setValues({
  ...values,
  [name]: value,
});
setErrors(validate(values));
setIsSubmiting(true);

};

const handleSubmit = (e) => {
e.preventDefault();
if (send) {
  console.log("WYSYŁAM");
  emailjs
    .sendForm(
      "service",
      "template",
      e.target,
      "user"
    )
    .then(
      (result) => {
        console.log(result.text);
      },
      (error) => {
        console.log(error.text);
      }
    );
  e.target.reset();
}

};

return { handleChange, values, handleSubmit, errors }; };

【讨论】：

【解决方案2】：

我遇到了同样的问题，发现向表单按钮添加“onClick”事件处理程序会阻止用户双击。

<button onClick={handleClick}> Submit </button>

在 useForm.js 中，我将 setErrors(validate(values)); 和 setIsSubmitting(true); 移至 handleClick

function handleClick() {
    setErrors(validate(values));
    setIsSubmitting(true);
};

const handleSubmit = e => {
    e.preventDefault();

    if (send) {
        emailjs.sendForm('service', 'templateKey', e.target, 'userKey')
            .then((result) => {
                console.log(result.text);
            }, (error) => {
                console.log(error.text);
            });
        callback();
    }
};

【讨论】：