コードとサンプルを使用して独自のフォームを構築します。
Input クリエーターを使用してフィールドを追加 できます。
フォームに変更を加えるとコードセクションが更新されます。コードセクション内のコードをコピーすることもできます。
import React from 'react'; import { useForm } from 'react-hook-form'; export default function App() { const { register, handleSubmit, formState: { errors } } = useForm(); const onSubmit = data => console.log(data); console.log(errors); return ( <form onSubmit={handleSubmit(onSubmit)}> <input type="text" placeholder="First name" {...register("First name", {required: true, maxLength: 80})} /> <input type="text" placeholder="Last name" {...register("Last name", {required: true, maxLength: 100})} /> <input type="text" placeholder="Email" {...register("Email", {required: true, pattern: /^\S+@\S+$/i})} /> <input type="tel" placeholder="Mobile number" {...register("Mobile number", {required: true, minLength: 6, maxLength: 12})} /> <select {...register("Title", { required: true })}> <option value="Mr">Mr</option> <option value="Mrs">Mrs</option> <option value="Miss">Miss</option> <option value="Dr">Dr</option> </select> <input {...register("Developer", { required: true })} type="radio" value="Yes" /> <input {...register("Developer", { required: true })} type="radio" value="No" /> <input type="submit" /> </form> ); }
React Hook Form のドキュメントを見て、API に関する全ての情報を確認してください。