ReactJS - 非制御コンポーネント
こんにちは、未来のプログラマーさんたち！今日は、ReactJSの世界に飛び込み、「非制御コンポーネント」という概念を探求します。プログラミングが新しい方でも心配しないでください。私はこれまでに多くの学生をガイドしてきましたので、ステップバイステップで説明します。お気に入りの飲み物を手に取り、このエキサイティングな旅に一緒に参加してください！
非制御コンポーネントとは？
本題に入る前に、まずReact에서非制御コンポーネントが何かを理解しましょう。紙のフォームに情報を記入して、終わったら提出する、というイメージです。これがReactでの非制御コンポーネントの動作です！
Reactでは、非制御コンポーネントは、Reactが管理するのではなく、自身で状態を内部で管理するフォーム要素です。まるでフォーム要素に自分の頭を持たせているようなものです！
非制御コンポーネントでのフォームプログラミング
では、実際のコードを手に取り、非制御コンポーネントがフォームプログラミングでどのように動作するかを見ていきましょう。
基本的な非制御インプット
以下は、基本的な非制御インプットの例です：
import React from 'react';
function SimpleForm() {
return (
<form>
<label htmlFor="name">名前:</label>
<input type="text" id="name" name="name" />
</form>
);
}
export default SimpleForm;この例では、名前のテキストインプットを持つシンプルなフォームがあります。状態やonChangeハンドラが無いことに注意してください。これはインプットが自身で状態を管理しているからです。
インプット値の取得
しかし、あなたは思うかもしれません、「Reactが管理していない場合、インプットの値をどうやって取得するの？」素晴らしい質問です！refを使ってDOMノードに直接アクセスすることができます。例を修正してみましょう：
import React, { useRef } from 'react';
function SimpleForm() {
const inputRef = useRef(null);
const handleSubmit = (event) => {
event.preventDefault();
alert('名前が送信されました: ' + inputRef.current.value);
};
return (
<form onSubmit={handleSubmit}>
<label htmlFor="name">名前:</label>
<input type="text" id="name" name="name" ref={inputRef} />
<button type="submit">送信</button>
</form>
);
}
export default SimpleForm;この更新版では、useRefフックを使ってインプットにリファレンスを作成しています。フォームが送信されると、inputRef.current.valueを使ってインプットの値にアクセスできます。
シンプルなフォームの作成
基本を理解したので、非制御コンポーネントを使ったより包括的なフォームを作成してみましょう。
複数インプットフォーム
import React, { useRef } from 'react';
function ComplexForm() {
const nameRef = useRef(null);
const emailRef = useRef(null);
const messageRef = useRef(null);
const handleSubmit = (event) => {
event.preventDefault();
const formData = {
name: nameRef.current.value,
email: emailRef.current.value,
message: messageRef.current.value
};
console.log('フォームデータ:', formData);
// ここで通常はサーバーにデータを送信します
};
return (
<form onSubmit={handleSubmit}>
<div>
<label htmlFor="name">名前:</label>
<input type="text" id="name" name="name" ref={nameRef} required />
</div>
<div>
<label htmlFor="email">メール:</label>
<input type="email" id="email" name="email" ref={emailRef} required />
</div>
<div>
<label htmlFor="message">メッセージ:</label>
<textarea id="message" name="message" ref={messageRef} required />
</div>
<button type="submit">メッセージを送信</button>
</form>
);
}
export default ComplexForm;この例では、名前、メール、メッセージの3つのフィールドを持つフォームを作成しています。各フィールドには独自のrefがあり、フォームが送信されるとその値にアクセスできます。
説明
- 各インプットに対してrefsを作成します。
-
handleSubmit関数では、デフォルトのフォーム送信動作を阻止し、refsを使って各インプットの値を収集します。 - フォームデータをコンソールにログします（実際のアプリケーションでは、このデータをサーバーに送信します）。
非制御コンポーネントの利点と欠点
非制御コンポーネントを使用する利点と欠点について少し話しましょう：
| 利点 | 欠点 |
|---|---|
| 基本的なフォームにはシンプルなコード | フォーム値の制御が少ない |
| 非Reactコードやライブラリとの統合に有用 | 动的なフォームバリデーションの実装が難しい |
| 非常に大きなフォームでのパフォーマンスが向上する可能性 | プログラムaticallyフォーム値をリセットするのが難しい |
| ファイルインプットとの相性が良い | Reactらしさが少なく、单一の真実の原則に従っていない |
非制御コンポーネントの使用时机
非制御コンポーネントは以下のシナリオで有用です：
- 非Reactコードやライブラリとの統合
- 実時バリデーションや動的更新不要のシンプルなフォーム
- ファイルインプットの使用
しかし、大多数のReactアプリケーションでは、フォームの状態をReactが管理する制御コンポーネントが一般的に好まれます。制御コンポーネントは、より多くの制御を提供し、Reactの哲学に従います。
結論
さて、皆さん！Reactの非制御コンポーネントの世界を一緒に探求してきました。制御コンポーネントと非制御コンポーネントの選択は、まるで手動車とオートマチック車の選択のようです。特定のニーズに応じて異なります。
このガイドが非制御コンポーネントの道筋を照らしてくれたことを願っています。続けて練習し、コーディングを続け、忘れずに、プログラミングの世界ではすべてのエラーは成功へのステップstonesです！
未来のReactマスターたち、ハッピーコーディング！
Credits: Image by storyset