Reactフックを使って制御されたコンポーネントを作成する方法|初心者向けガイド
2022年の新年、React.jsの初心者向けの講座を始めます。
まずはじめに、明けましておめでとうございます!皆さんはお正月をどのようにお過ごしでしょうか?自宅でのんびり過ごす方もいれば、勉強に励む方もいるかもしれませんね。
React.jsを学習している初心者の方々に、私は応援の気持ちを込めて、今日もReact.jsの学習方法をブログで提供していきたいと思います。
React開発者として、制御可能なコンポーネントを作成することは、非常に重要なスキルの1つです。
このブログでは、Reactフックを使って、制御されたコンポーネントを作成する方法を初心者向けにご紹介します。
ぜひ、参考にしてください。
制御されたコンポーネントとは?
Reactにおける「制御可能」とは、コンポーネント内のPropsやユーザーインタラクションから発生する変更に対応できるコンポーネントのことを指します。
Reactにおいて、フォームデータを扱うコンポーネントには、「制御されたコンポーネント」と「制御されていないコンポーネント」の2つのアプローチがあります。
制御されたコンポーネントでは、Reactの状態を使ってフォームの値を管理するため、値の変更やフォームの送信をコントロールしやすくなります。
また、制御されたコンポーネントでは、データの処理を親コンポーネントで行うことで、データの整合性を確保することができます。
したがって、制御されたコンポーネントを使用することで、フォーム要素やデータを適切に制御することが容易になります。
Reactのドキュメントでは、制御されたコンポーネントが推奨されています。
制御されたコンポーネントを使用することで、コンポーネントの状態を介して入力の値を読み取り、設定することができます。
つまり、制御されたコンポーネントは外部から制御されることで、コンポーネント自身の状態を変更することができます。
コンポーネントの状態を介して入力の値を読み取って設定するため、制御されたコンポーネントを好んで扱います。
制御されていないコンポーネントとは?
Reactにおける、制御されていないコンポーネントでは、従来のHTMLフォーム入力要素に似た振る舞いをします。
このタイプのコンポーネントでは、Reactの状態ではなく、DOMの状態に基づいてフォーム要素の値が管理されます。
フォーム要素とデータの制御は制限され、内部の状態を維持しながら、データはDOM自体によって制御されます。
したがって、制御されていないコンポーネントを使用する場合、フォーム要素やデータを適切に制御することが困難になる場合があります。
フォーム要素とデータの制御が制限され、内部の状態が維持されるため、フォームの制御が必要ない単純なフォームの場合に使用されることがあります。
なぜ制御されたコンポーネントを使用する?
それら理由の主な利点は次の通りです
「制御されていないコンポーネント」を使用する場合、フォームを送信するときにのみ入力の値にアクセスが可能です。
ただし、「制御されたコンポーネント」を使用する場合は常に値にアクセスでき、すべてのキーストロークに検証チェックを実装するのが容易になる為です。
つまり、制御されたコンポーネントは、入力フィールドの値に常にアクセスできるため、すべてのキーストロークに検証チェックを実装することが簡単です。
これは、通常のテキスト入力、テキストエリア、選択フィールドなど、あらゆる入力タイプの値にアクセスする場合に特に役立ちます。
即時性のある検証チェックの役割を果たします。
制御されたコンポーネントの作成
Reactにおいて、テキスト入力フィールドを制御するための基本的なコンポーネントを紹介します。
まず、入力値を保持するための状態変数を定義します。
この状態変数には入力フィールドに入力された値が含まれます。
import { useState } from 'react'; const App = () => { const [value, setValue] = useState(''); const onChange = (e) => { e.preventDefault() console.log(value); }; return ( <div className='App-header'> <div>test Input: {value}</div> <input value={value} onChange={(e) => setValue(e.target.value)} /> <button onClick={onChange} disabled = {value.length < 4}>送信</button> </div> ); }
まず、入力値が変更されたときに状態を更新するイベントハンドラーを作成します。
const onChange = (e) => { e.preventDefault() console.log(value); };
そして、入力フィールドに値を設定するためにReact状態を使用します。
これにより、入力フィールドは制御されたコンポーネントとして扱われ、新しい値が入力されるたびにReact状態が更新され、ユーザーに表示される値も更新されます。
<input value={value} onChange={(e) => setValue(e.target.value)} />
さらに、ボタンを押せないようにするために、disabled
を使用し、値の長さに応じて条件を設定してレンダリングします。
<button onClick={onChange} disabled = {value.length < 4}>送信</button>
ユーザーが入力フィールドに入力すると、入力された値を状態の値に割り当て、onChangeハンドラーはイベントオブジェクトからアクセスして、入力の値で状態を更新します。
したがって、入力した値にアクセスする必要がある場合は、単にvalue状態変数を読み取ればよいです。
以上が、Reactにおける基本的なテキスト入力フィールドの制御についての説明となります。
制御されていないコンポーネントの作成
Reactでは、DOM要素にアクセスするために、useRefフックが提供されています。
useRefフックを使用すると、DOM要素への参照を作成することができます。
この参照は、Reactコンポーネント内で変数として扱われ、その値にはcurrent
プロパティを持ちます。
この参照を、input要素に渡すことで、その要素の値にアクセスすることができます。
useRefフックは以下でも詳しく解説していますので参照ください。
以下が、 制御されていないコンポーネントのコード例です。
import React, { useRef } from "react"; // コンポーネントの定義 const App = () => { // input要素への参照を作成する const inputRef = useRef(null); // input要素の値をコンソールに出力する関数 const handleChange = (e) => { e.preventDefault(); console.log(inputRef.current.value); }; return ( <div> {/* input要素に参照を渡す */} <input type="text" ref={inputRef} /> {/* ボタンをクリックしたら、handleChange関数が呼ばれる */} <button onClick={handleChange}>送信</button> </div> ); };
input要素には、ref
属性を指定することで参照を渡します。
この参照を通じて、フォーカスやテキスト選択、メディア再生などの操作を制御することができます。
Reactでは、フォームの送信時にデータがDOMに保存されることはありません。
代わりに、制御されたコンポーネントとしてフォームを実装することが推奨されます。
つまり、上記のコードは制御されていないコンポーネントであり、フォームの値をReactコンポーネントの状態として管理することができません。
制御されたコンポーネントとしてフォームを実装するためには、useStateフックを使用して状態変数を定義し、onChangeイベントを使用して状態変数を更新する必要があります。
また、フォームの値を状態変数にバインドするために、value属性を状態変数に指定する必要があります。
制御されたコンポーネントでは、フォームの状態をReactコンポーネントの状態として管理し、それに基づいてUIを更新します。
最後に
両方のアプローチには支持者と反対者がおり賛否両論となっております、同じように役立ちますが、個人的には、制御されたコンポーネントを使用することを強くお勧めします。
この方法は、フォームの入力値を簡単に管理できるため、開発者にとって非常に便利です。
一方、制御されていないコンポーネントを使用する場合は、状態が自動的に管理されるため、開発者は柔軟性を犠牲にしなければなりません。
したがって、制御されたコンポーネントを使用することをお勧めします。
以上が今日の内容です。
最後まで読んでいただき、ありがとうございます。今年もよろしくお願いいたします。