React の制御されたコンポーネントと制御されていないコンポーネント

1. React で制御されるコンポーネント
2. React の制御されていないコンポーネント

Web 開発者は、さまざまな理由で JavaScript ベースのフレームワークを使用します。主な理由は、JavaScript ベースのフレームワークを使用すると、インタラクティブな Web アプリケーションを構築して、可能な限り最高のユーザー エクスペリエンスを提供できるからです。

この記事では、React における制御されたコンポーネントの概念について説明し、それらを実装する方法と必要な場合についてアドバイスします。

2つのタイプのコンポーネントの主な違いは、状態を維持する方法と、入力フィールドの値にアクセスする方法です。

React で制御されるコンポーネント

このタイプのコンポーネントでは、ユーザー入力は常に状態に保存され、setState() メソッドを使用してのみ更新されます。 <input> 要素の value 属性は、この状態値に設定されます。

これにより、州が信頼できる唯一の情報源となります。 入力フィールドに何かを入力すると状態値が更新され、入力フィールドの値は最新の状態を反映します。

つまり、テキスト フィールドは状態を更新し、その値も状態から取得します。

以下は、制御されたコンポーネントの例です。

import "./styles.css";
import { useState } from "react";
export default function App() {
  const [input, setInput] = useState("");
  return (
    <div className="App">
      <input
        type="text"
        value={input}
        onChange={(e) => setInput(e.target.value)}
      ></input>
      <p>The text you entered:</p>
      <h1>{input}</h1>
    </div>
  );
}

この例では、コア React ライブラリから useState() フックをインポートします。 フックを使用して状態変数 input を作成し、関数を使用してその値を更新します。

状態変数を空の文字列に初期化します。

JSX には、<input>、<p>、および <h1> の 3つの要素を含む <div> 要素があります。 ユーザーが何かを入力または削除するたびに、onChange イベント ハンドラーが入力フィールドの最新の値で状態を更新するように、input 要素を設定します。

また、入力フィールドが状態から値を取得するように value 属性を設定します。

最後に <h1> 要素があります。この要素は、状態変数の文字列を表すヘッダー テキストを表示します。

CodeSandbox でこのライブ デモをチェックして、すべてがどのように機能するかを確認してください。

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

DOM の入力要素は、その状態を維持できます。 制御されていないコンポーネントの場合、DOM 要素で値に直接アクセスします。

React では、refs を使用して入力要素にアクセスします。 この場合、ref.current.value を使用して入力要素の現在の値にアクセスします。

したがって、React で refs を作成して、制御されていないコンポーネントを作成する必要があります。 そのためには、機能コンポーネントの useRef() フック、またはクラス コンポーネントの React.createRef() メソッドのいずれかが必要になります。

React docs によると、アプリケーションには制御されたコンポーネントのみが必要です。 制御されていないコンポーネントは予測不能であり、保守が困難です。