React Hooksで入力処理

React Hooksで入力処理を扱う

React Hooksは、Reactコンポーネントのロジックをよりシンプルかつ効率的に管理するための機能です。その中でも、入力処理を実装する際に頻繁に使用されるフックが useState と useEffect です。

useState

• 入力値の保存
  入力フィールドの値を保存し、コンポーネントの再レンダリング時に更新された値を表示します。
• 状態の管理
  コンポーネントの内部状態を管理するためのフックです。

import { useState } from 'react';

function MyComponent() {
  const [inputValue, setInputValue] = useState('');

  const handleChange = (event) => {
    setInputValue(event.target.value);
  };

  return (
    <div>
      <input type="text" value={inputValue} onChange={   handleChange} />
      <p>入力値: {inputValue}</p>
    </div>
  );
}

useEffect

• 入力値の検証
  入力値が変更されたときに、特定の条件を満たしているかを確認する処理を実装できます。
• 副作用の処理
  コンポーネントのレンダリング後に実行される処理を管理するためのフックです。

import { useState, useEffect } from 'react';

function MyComponent() {
  const [inputValue, setInputValue] = useState('');
  const [isValid, setIsValid] = useState(false);

  useEffect(() => {
    if (inputValue.length > 5) {
      setIsValid(true);
    } else {
      setIsValid(false);
    }
  }, [inputValue]);

  return (
    <div>
      <input type="text" value={inputValue} onChange={handleChange} />
      <p>入力値が有効: {isValid ? '有効' : '無効'}</p>
    </div>
  );
}

ポイント

• 入力値の検証
  useEffect 内で入力値の検証を行い、その結果に応じてコンポーネントの表示を更新できます。
• 依存関係配列
  useEffect の第2引数である依存関係配列に inputValue を指定することで、入力値が変更されたときにのみ効果を実行します。
• 状態の更新
  setInputValue を使用して入力値を更新すると、コンポーネントが再レンダリングされ、新しい値が表示されます。

useStateを使った入力値の保存と表示

import { useState } from 'react';

function MyComponent() {
  const [inputValue, setInputValue] = useState('');

  const handleChange = (event) => {
    setInputValue(event.target.value);
  };

  return (
    <div>
      <input type="text" value={inputValue} onChange={   handleChange} />
      <p>入力値: {inputValue}</p>
    </div>
  );
}

• onChange
  入力フィールドの値が変更されたときに呼び出されるイベントリスナーです。
• value
  入力フィールドの値を指定します。
• setInputValue
  入力値を更新するための関数です。
• inputValue
  入力フィールドの値を保存する状態変数です。

useEffectを使った入力値の検証

import { useState, useEffect } from 'react';

function MyComponent() {
  const [inputValue, setInputValue] = useState('');
  const [isValid, setIsValid] = useState(false);

  useEffect(() => {
    if (inputValue.length > 5) {
      setIsValid(true);
    } else {
      setIsValid(false);
    }
  }, [inputValue]);

  return (
    <div>
      <input type="text" value={inputValue} onChange={handleChange} />
      <p>入力値が有効: {isValid ? '有効' : '無効'}</p>
    </div>
  );
}

• 条件付き表示
  isValid の値に応じて、入力値が有効かどうかを表示します。
• isValidの更新
  入力値の検証結果に基づいて isValid を更新します。
• isValid
  入力値が有効かどうかを表す状態変数です。

Controlled ComponentsとUncontrolled Components

Reactでは、入力フィールドを制御する方法として、Controlled ComponentsとUncontrolled Componentsの2つのアプローチがあります。

Controlled Components

• 例
  上記の例で示した方法。
• 利点
  入力値の検証やフォーマット処理を容易に行えます。
• value プロパティと onChange イベントを使用して、入力フィールドの値を制御します。
• コンポーネントの内部状態を使用して入力値を管理します。

• 例
  
• 利点
  シンプルな入力処理の場合に適しています。
• ref プロパティを使用して、DOM要素への参照を取得し、直接値にアクセスします。

import { useRef } from 'react';

function MyComponent() {
  const inputRef = useRef(null);

  const handleSubmit = (event) => {
    event.preventDefault();
    const inputValue = inputRef.current.value;
    // 入力値の処理
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" ref={inputRef} />
      <button type="submit">送信</button>
    </form>
  );
}

Custom Hooks

• 複数のコンポーネントで共通の入力ロジックを共有できます。
• 複雑な入力処理を再利用可能なフックとしてカプセル化できます。

import { useState } from 'react';

function useInput(initialValue) {
  const [value, setValue] = useState(initialValue);

  const handleChange = (event) => {
    setValue(event.target.value);
  };

  re   turn [value, handleChang   e];
}

function MyComponent() {
  const [inputValue, handleInputChange] = useInput('');

  return (
    <div>
      <input type="text" value={inputValue} onChange={handleInputChange} />
      <p>入力値: {inputValue}</p>
    </div>
  );
}

ReduxまたはContext API

• 例
  
  • Redux: Reduxのストアに入力値を保存し、useSelector と useDispatch を使用してアクセスします。
  • Context API: Contextを作成し、入力値をプロバイダーからコンシューマーに渡します。
• 入力値をグローバルな状態として管理し、複数のコンポーネントからアクセスできます。
• アプリケーション全体で状態を管理する必要がある場合に適しています。