deve.K

エンジニアが未来を切り開く。

トップ > React基礎 > React.js Hooks 制御可能なコンポーネント

React.js Hooks 制御可能なコンポーネント

React基礎

新年、一発目のReact.js講座となります

明けましておめでとうございます！。

お正月は皆様、どのようにお過ごしでしょうか？

自宅でゆっくりくつろいでる方々もいらっしゃれば 勉強されてる方々もいらっしゃると思います。

努力をされてる初学者様に対し私は応援致します

そして私なりに、ブログを通して本日もReactの学習提供をしていきたいと思います。

React開発者になるのであれば、制御可能なコンポーネントは貴方のレパートリーの1つとして重要な部分となります。

当ブログでは、Reactフックを使用して制御されたコンポーネントを実装する方法をご紹介致します。

制御可能とは？

オリジナルreact画像

これらは、コンポーネント内の小道具(props)またはユーザーインタラクションという2つの異なるソースからの変更を期待する可能性のあるコンポーネントです。

Reactで制御されるコンポーネントは、フォームデータがコンポーネントの状態によって処理されるコンポーネントとなり

入力フィールドの値にアクセスするための2つのアプローチを提供致します。

『制御されたコンポーネント』または『制御されていないコンポーネント』の手法を使用します。

制御可能なコンポーネントのこれら2つのバージョンは、それぞれ『制御』および『非制御』と呼ばれており

これらの名前はあまり直感的ではありません、なので分かりやすく言ってしまえば

制御は小道具による『外部制御』

非制御はコンポーネントの状態による『内部制御』

だと思っておいて下さい。

コンポーネントの状態を介して入力の値を読み取って設定するため、制御されたコンポーネントを好んで扱います。

Reactのドキュメントでは、ほとんどの場合が制御されたコンポーネントが推奨されています。

制御がされていないコンポーネント

制御されていないコンポーネントは、従来のHTMLフォーム入力要素に非常に良く似ています。

入力への参照にアクセスすることで、入力の値を取得できるからです。

フォーム要素とデータの制御は制限され内部の状態を維持し、データは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>
    );
  }

入力フィールドで確認下さい。

DEMO

reactGIF画像

const [value, setValue] = useState('');

入力値を保持する状態を定義し

『value』状態変数には入力フィールドに入力された値が含まれています。

ユーザーが文字を入力するたびに、Reactの状態が更新されユーザーに表示される値も更新されていきます。

const onChange = (e) => {
    e.preventDefault()
    console.log(value);
  };

入力値が変更されたときに状態を更新するイベントハンドラーの作成をします。

<input value={value} onChange={(e) => setValue(e.target.value)} />

React状態でアクセスできるので、これは制御されたコンポーネントと見なされ

新しい値を入力するたびに更新されていきReactでは状態から値を設定するため入力フィールドが制御されます。

<button onClick={onChange} disabled = {value.length < 4}>送信</button>

『disabled』を使用しボタンを押せないようにしときます、『value』値の長さに応じて、条件を付けてレンダリングさせます。

ユーザーが入力フィールドに入力した時に状態の値を割り当て、『onChangeハンドラー』はイベントオブジェクトからアクセス時に入力の値で状態を更新していきます。

なので入力した値にアクセスする必要があるたび、『value』状態変数を読み取るだけとなります。

これは基本的な制御コンポーネントを説明する為の基礎となります。

制御されていないコンポーネント

import React, { useRef } from "react";

const App = () => {

  const inputRef = useRef(null);

  const handleChange = (e) => {
    e.preventDefault();

    console.log(inputRef.current.value);
  };

  return (
    <div>
      <input type="text" ref={inputRef} />
      <button onClick={handleChange}>送信</button>
    </div>
  );
};

DOM要素の参照は『useRef』フックを使用します

このフックが持つオブジェクトを作成する『current』の値を保持するプロパティで、この参照を要素に設定し値にアクセスが可能となります。

useRefフックで参照の作成をします。

const inputRef = useRef(null);

参照したのを『input要素』に渡していきます

<input type = "text" ref = {inputRef} />

refの場合はフォーカス、テキスト選択、またはメディア再生の管理、命令型アニメーションのトリガーなどで良いケースがあります。

これらの変数はref属性を介して入力要素に関連付けられ

制御されていないコンポーネントは、従来のHTML入力要素のようにフォームの送信時にデータをDOMに保存していきます。

useRefが良く分からない方はこちらで学ばれてみて下さい。

dev-k.hatenablog.com

Reactでのフォーム処理の基礎についての簡単な紹介でした。

これら両方のアプローチには賛否両論があり、どちらも同じように役立ちます。

私個人的には、なるべく制御されたコンポーネントを扱うようにしていって貰いたいです。

この制御されたコンポーネントで実践的なReactでのフォーム実装もご紹介していこうかと思います。

本日は以上となります。

最後まで読んで頂きありがとうございました。

今年も皆様よろしくお願い致します。

この記事が貴方の役に立つ事を願っております。

プライバシーポリシー