向Gatsby JS添加表单，并使用导出默认的现有模板

npm install react-hook-form

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

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

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

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input type="text" name="name" ref={register({ required: true })} />
      {errors.name && <span>This field is required</span>}
      <button type="submit">Submit</button>
    </form>
  );
};

export default Form;

import React from "react";
import Form from "../components/Form";

const IndexPage = () => {
  return (
    <div>
      <h1>Welcome to my website</h1>
      <Form />
    </div>
  );
};

export default IndexPage;

gatsby develop