React，在提交带有react-hook-form的表单后显示消息

Question

我使用react-hook-form，并希望在提交表单后向用户显示消息。我知道如何使用警报来执行此操作，但希望将该消息作为一个段落。提交后，字段应再次为空。

这是我的表单组件：

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

const Form = ({ title }) => {
  const { register, handleSubmit, errors } = useForm();

  const onSubmit = (data, e) => {
    e.preventDefault();
    console.log(data);
    alert(`thank you ${data.name} for your message`);
  };

  return (
    <div className="formContainer">
      <Title title="Lets stay in touch" />
      <div className="form">
          <form onSubmit={handleSubmit(onSubmit)}>
            <div className="form__row">
              <input
                className={`inputForm ${errors.name ? "inputFormError" : ""}`}
                name="name"
                type="text"
                placeholder="name"
                ref={register({ required: true })}
              />

              <input
                className={`inputForm ${
                  errors.surname ? "inputFormError" : ""
                }`}
                name="surname"
                type="text"
                placeholder="surname"
                ref={register({ required: true })}
              />
            </div>
            <div>
              <textarea
                className={`inputForm areaForm ${
                  errors.message ? "inputFormError" : ""
                }`}
                name="message"
                placeholder="Your message"
                ref={register({ required: true })}
              ></textarea>
            </div>
            <div>
              <button className="form__formButton" type="submit">
                Send
              </button>
            </div>
          </form>
      </div>
    </div>
  );
};

export default Form;

Answer 1

非常简单，仅需一个useState即可显示该消息，而钩子窗体中的reset API可以重置表单：

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

const Form = ({ title }) => {
  const [message, setMessage] = useState('');
  const { register, handleSubmit, errors, reset } = useForm();

  const onSubmit = (data, e) => {
    e.preventDefault();
    console.log(data);
    setMessage(`thank you ${data.name} for your message`);
    reset();
  };

  return (
    <div className="formContainer">
      <Title title="Lets stay in touch" />
      <div className="form">
          {message}
          <form onSubmit={handleSubmit(onSubmit)}>
            <div className="form__row">
              <input
                className={`inputForm ${errors.name ? "inputFormError" : ""}`}
                name="name"
                type="text"
                placeholder="name"
                ref={register({ required: true })}
              />

              <input
                className={`inputForm ${
                  errors.surname ? "inputFormError" : ""
                }`}
                name="surname"
                type="text"
                placeholder="surname"
                ref={register({ required: true })}
              />
            </div>
            <div>
              <textarea
                className={`inputForm areaForm ${
                  errors.message ? "inputFormError" : ""
                }`}
                name="message"
                placeholder="Your message"
                ref={register({ required: true })}
              ></textarea>
            </div>
            <div>
              <button className="form__formButton" type="submit">
                Send
              </button>
            </div>
          </form>
      </div>
    </div>
  );
};

export default Form;