Gatsby JS是一个基于React的静态网站生成器,它可以帮助开发者快速构建高性能的静态网站。要向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;
在上述代码中,我们使用了react-hook-form库来处理表单。通过调用useForm()钩子函数,我们可以获取到表单所需的各种方法和属性,如register用于注册表单字段、handleSubmit用于处理表单提交、errors用于显示表单验证错误信息。
import React from "react";
import Form from "../components/Form";
const IndexPage = () => {
return (
<div>
<h1>Welcome to my website</h1>
<Form />
</div>
);
};
export default IndexPage;
在上述代码中,我们引入了刚刚创建的Form组件,并将其放置在页面中。
gatsby develop
现在,您的Gatsby网站中已经添加了一个简单的表单。当用户在表单中输入内容并提交时,表单数据将被打印到浏览器的控制台中。
领取专属 10元无门槛券
手把手带您无忧上云