フォームは Web アプリケーションに不可欠であり、ユーザーの対話とデータ収集を可能にします。 React.js では、効率と保守性を確保するために、状態管理とコンポーネント駆動型アーキテクチャを使用してフォームを構築します。このガイドでは、React.js でフォームを構築し、アプリケーションを堅牢で使いやすいものにするためのベスト プラクティスについて説明します。
React でフォーム入力を処理するには、制御されたコンポーネントが推奨される方法です。フォーム データをコンポーネントの状態に保持するため、管理と検証が容易になります。
すべてのフォーム入力値を状態に保存します。オブジェクトを作成し、すべての入力を状態のプロパティにマップします。以下の例
import React, { useState } from 'react'; const MyForm = () => { const [formData, setFormData] = useState({ name: '', email: '' }); const handleChange = (e) => { const { name, value } = e.target; setFormData({ ...formData, [name]: value }); }; const handleSubmit = (e) => { e.preventDefault(); console.log(formData); }; return ( <form onSubmit={handleSubmit}> <input type="text" name="name" value={formData.name} onChange={handleChange} /> <input type="email" name="email" value={formData.email} onChange={handleChange} /> <button type="submit">Submit</button> </form> )} export default MyForm
エラー処理と検証はフォームの重要な部分です。ユーザーが入力したすべての値を検証してエラーをチェックし、次のようなすべてのケースに対処する必要があります。
ユーザー エクスペリエンスを向上させ、サーバーの負荷を軽減し、最終的にパフォーマンスを向上させるために、クライアント側の検証を実装する必要があります。 Yup などのライブラリやカスタム検証ロジックを利用して、データの整合性を確保します。
カスタム検証ロジックを実装する方法を見てみましょう
const validate = (formData) => { const errors = {}; if (!formData.name) errors.name = 'Name is required'; if (!formData.email) errors.email = 'Email is required'; return errors; }; const MyForm = () => { const [formData, setFormData] = useState({ name: '', email: '' }); const [errors, setErrors] = useState({}); const handleSubmit = (e) => { e.preventDefault(); const validationErrors = validate(formData); if (Object.keys(validationErrors).length === 0) { console.log(formData); } else { setErrors(validationErrors); } }; return ( <form onSubmit={handleSubmit}> <input type="text" name="name" value={formData.name} onChange={handleChange} /> {errors.name && <span>{errors.name}</span>} <input type="email" name="email" value={formData.email} onChange={handleChange} /> {errors.email && <span>{errors.email}</span>} <button type="submit">Submit</button> </form> ); };
作業を容易にするために、Yup パッケージを使用してフォーム データをスムーズに検証する必要があります。これは、React-Hook-Form や Formik などのフォーム ライブラリで使用される非常に人気のあるパッケージです。
はいドキュメント: https://www.npmjs.com/package/yup
Formik や React Hook Form などのライブラリはフォーム管理を簡素化し、すぐに使える強力な機能を提供し、開発者がよりスケーラブルで柔軟な方法でフォームの構築と検証を容易にします
Formik の使用:
ドキュメント:- https://formik.org/docs/overview
import React from 'react'; import ReactDOM from 'react-dom'; import { Formik, Field, Form } from 'formik'; const BasicForm = () => ( <div> <h1>Sign Up</h1> <Formik initialValues={{ firstName: '', lastName: '', email: '', }} onSubmit={async (values) => { await new Promise((r) => setTimeout(r, 500)); alert(JSON.stringify(values, null, 2)); }} > <Form> <label htmlFor="firstName">First Name</label> <Field id="firstName" name="firstName" placeholder="Jane" /> <label htmlFor="lastName">Last Name</label> <Field id="lastName" name="lastName" placeholder="Doe" /> <label htmlFor="email">Email</label> <Field id="email" name="email" placeholder="jane@acme.com" type="email" /> <button type="submit">Submit</button> </Form> </Formik> </div> ); ReactDOM.render(<BasicForm />, document.getElementById('root'));
クリックしてライブ Formik デモをチェックしてください
これらのベスト プラクティスに従うことで、React.js でフォームを構築することが簡単かつ効率的になります。制御されたコンポーネントを状態管理に使用し、入力を徹底的に検証し、サードパーティ ライブラリを活用し、適切なスタイルで UX を強化し、パフォーマンスを最適化して応答性の高い堅牢なフォームを作成します。
これらのガイドラインに従うことで、フォームの信頼性、ユーザーフレンドリー、保守性を確保でき、ユーザーと開発者の両方にシームレスなエクスペリエンスを提供できます。
以上がReact.js でフォームを構築する : 初心者ガイドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。