React-Hook-表单验证

Question

我希望使用 react-hook 实现表单验证。但是，我在这样做时遇到了一些麻烦，因为我还在 handleSubmit 下自己添加了一些东西，但我不太确定该怎么做。

export default function Contact() {
const [message, setMessage] = useState(false);
const [alert, setAlert] = useState(true);


const { register, errors} = useForm();
const [showElement, setShowElement] = React.useState(false);
const handleSubmit = (e) => {
  e.preventDefault();

  emailjs.sendForm('', '', e.target, '')
  .then((result) => {
      console.log(result.text);
  }, (error) => {
      console.log(error.text);
  });
  e.target.reset();
  setMessage(true);
  setShowElement(true);
  setTimeout(function () {
    setShowElement(false);
  }, 4000);
};

const onSubmit= data=>{
  console.log(data);
}


return (
    <div className="right">
      <h2>Contact Me</h2>
      <form onSubmit={handleSubmit} id="contactform">
        <input type="text" placeholder="Name" name="name" ref={register({required: true, minLength: 2})}
         required />
        <button type="submit">Send</button>
      </form>
      {showElement ? (
        <div className="submitmsg">
          {message && (
            <span> Messaged received. I'll respond to your query ASAP! </span>
          )}
        </div>
      ) : (
        <div> </div>
      )}{" "}
    </div>
 )
}

谢谢！

Answer 1

React hook form 提供了 handeSubmit 方法在验证后接收表单数据。此外，您必须使用错误对象来显示 UI.

中的错误

这里是沙箱link：https://codesandbox.io/s/exciting-dust-df5ft?file=/src/App.js

我已经相应地更新了您的代码：

import { useState } from "react";
import React from "react";
import emailjs from "emailjs-com";
import { useForm } from "react-hook-form";

export default function Contact() {
  const [message, setMessage] = useState(false);
  const {
    register,
    handleSubmit,
    formState: { errors }
  } = useForm();
  const [showElement, setShowElement] = React.useState(false);

  const onSubmit = (data) => {
    emailjs
      .send(
        "service_t1ccrgq",
        "template_gmmcyzr",
        data,
        "user_d0vUwhmqvbIYhEsyZF8tu"
      )
      .then(
        (result) => {
          console.log(result.text);
        },
        (error) => {
          console.log(error.text);
        }
      );
    setMessage(true);
    setShowElement(true);
    setTimeout(function () {
      setShowElement(false);
    }, 4000);
  };

  return (
    <div className="contact" id="contact">
      <div className="left">
        <img className="contactme" src="asset/email.gif" />
      </div>

      <div className="right">
        <h2>Contact Me</h2>
        <form onSubmit={handleSubmit(onSubmit)} id="contactform">
          <input
            type="text"
            placeholder="Name"
            name="name"
            {...register("name", {
              required: "Name is Required",
              minLength: {
                value: 3,
                message: "Should be greater than 3 characters"
              }
            })}
          />
          <input
            type="tel"
            placeholder="Mobile Number"
            name="mobile"
            {...register("mobile", {
              required: "Mobile Number is Required",
              minLength: {
                value: 3,
                message: "Should be greater than 3 characters"
              }
            })}
          />
          <input
            type="text"
            placeholder="Email"
            name="email"
            {...register("email", {
              required: "Email is Required",
              minLength: {
                value: 3,
                message: "Should be greater than 3 characters"
              }
            })}
          />
          <textarea
            placeholder="Message"
            required
            name="message"
            {...register("message", {
              required: "Message is Required",
              minLength: {
                value: 3,
                message: "Should be greater than 3 characters"
              }
            })}
          ></textarea>
          <button type="submit">Send</button>
        </form>
        {showElement ? (
          <div className="submitmsg">
            {message && (
              <span> Messaged received. I'll respond to your query ASAP! </span>
            )}
          </div>
        ) : (
          <div> </div>
        )}{" "}
      </div>
      {errors.name && (
        <div>
          <span>{errors.name.message}</span>
        </div>
      )}
      {errors.message && (
        <div>
          <span>{errors.message.message}</span>
        </div>
      )}
      {errors.email && (
        <div>
          <span>{errors.email.message}</span>
        </div>
      )}
      {errors.mobile && (
        <div>
          <span>{errors.mobile.message}</span>
        </div>
      )}
    </div>
  );
}

Answer 2

您必须先如下初始化 handleSubmit。

const {handleSubmit} = useForm();

然后在表单中，onSubmit应该如下所示。

<form onSubmit={handleSubmit(onSubmit)}>

“onSubmit”是用于编写提交表单代码的方法。问候。在您的代码中，它应该如下所示。

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

      emailjs.sendForm('', '', e.target, '')
      .then((result) => {
      console.log(result.text);
      }, (error) => {
      console.log(error.text);
      });
      e.target.reset();
      setMessage(true);
      setShowElement(true);
      setTimeout(function () {
      setShowElement(false);
     }, 4000);
 };

React-Hook-表单验证

React-Hook-Form Validation

forms

validation

reactjs

react-hooks

react-hook-form