Form 取り扱いと Validation 中 Next.js

フォームの構築とデータの実行は、 validation Web アプリケーション開発の重要な部分です。 validation このセクションでは、アプリケーションで フォームを構築し、データを処理する方法を説明します Next.js。 また、効率的に状態を 管理し、データを実行するための や form などの人気のあるライブラリ についても詳しく説明します 。 react-hook-form Formik form validation

取り扱い react-hook-form に 使用する Form

react-hook-form は、アプリケーション内の form 状態の管理とデータの実行を 簡素化するライブラリです 。 以下は、登録を構築するために 使用する方法の例です 。 validation Next.js react-hook-form form

import { useForm } from 'react-hook-form';  
  
function RegistrationForm() {  
  const { register, handleSubmit, errors } = useForm();  
  
  const onSubmit =(data) => {  
    console.log(data);  
  };  
  
  return( 
    <form onSubmit={handleSubmit(onSubmit)}>  
      <input  
        type="text"  
        name="username"  
        placeholder="Username"  
        ref={register({ required: true, minLength: 5 })}  
      />  
      {errors.username && <p>Username is required and must be at least 5 characters long</p>}  
  
      <input  
        type="email"  
        name="email"  
        placeholder="Email"  
        ref={register({ required: true, pattern: /^\S+@\S+$/i })}  
      />  
      {errors.email && <p>Valid email is required</p>}  
  
      <button type="submit">Register</button>  
    </form>  
 );  
}  
  
export default RegistrationForm;  

上記の例では、 を使用して 状態 react-hook-form を管理し、データを実行します 。 ユーザーがボタンをクリックすると送信され 、 エラー がある場合は表示されます。 form validation form Register validation

取り扱い Formik に 使用する Form

Formik form は、状態、データを管理し validation 、フォーム関連の対話を処理する ための強力なライブラリです。 Formik アプリケーションでの 使用方法の例を次に示します Next.js。

import { Formik, Form, Field, ErrorMessage } from 'formik';  
  
function ContactForm() {  
  const initialValues = {  
    name: '',  
    email: '',  
  };  
  
  const validate =(values) => {  
    const errors = {};  
  
    if(!values.name) {  
      errors.name = 'Name is required';  
    }  
  
    if(!values.email) {  
      errors.email = 'Email is required';  
    }  
  
    return errors;  
  };  
  
  const onSubmit =(values) => {  
    console.log(values);  
  };  
  
  return( 
    <Formik initialValues={initialValues} validate={validate} onSubmit={onSubmit}>  
      <Form>  
        <div>  
          <Field type="text" name="name" placeholder="Name" />  
          <ErrorMessage name="name" component="div" />  
        </div>  
        <div>  
          <Field type="email" name="email" placeholder="Email" />  
          <ErrorMessage name="email" component="div" />  
        </div>  
        <button type="submit">Submit</button>  
      </Form>  
    </Formik>  
 );  
}  
  
export default ContactForm;  

上記の例では、 を使用して 状態 Formik を管理し、データを実行します 。 エラーが発生した場合は、メッセージとして表示されます。 form validation Validation

結論

validation このセクションでは、アプリケーションでの フォームの構築とデータの実行について紹介しました Next.js。 react-hook-form および Formik ライブラリを使用して効率的に状態を管理し form 、データを実行する 方法を学習しました validation。 これは、より優れたユーザー エクスペリエンスと応答性を提供するインタラクティブなフォームを作成するのに役立ちます。