使用react-hook-form using hooks在表单提交时显示成功消息

npm install react-hook-form

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

const MyForm = () => {
  const { register, handleSubmit } = useForm();

  const onSubmit = (data) => {
    // 处理表单提交逻辑
    // 可以在这里向后端发送请求，保存表单数据等操作
    // 在成功后显示成功消息
    alert("提交成功！");
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      {/* 在表单中定义字段和验证规则 */}
      {/* 使用register函数注册表单字段 */}
      {/* 可以为每个字段设置验证规则，如required、pattern等 */}
      {/* 示例中只有一个字段name，其他字段可以根据实际情况添加 */}
      <input {...register("name", { required: true })} />

      {/* 提交按钮 */}
      <button type="submit">提交</button>
    </form>
  );
};

export default MyForm;

import React from "react";
import MyForm from "./MyForm";

const App = () => {
  return (
    <div>
      <h1>我的表单</h1>
      <MyForm />
    </div>
  );
};

export default App;