Reactのフォームを使用する

ユーザー入力の処理は、ほぼすべてのアプリケーションにとって基本であり、Web開発の世界では、HTMLフォームがこのタスクの標準ツールです。 あなたが反応するのが初めてなら、フォームを統合することは気が遠くなるように思えるかもしれません。この記事では、基本的なテクニックと高度なテクニックの両方をカバーする、Reactのフォームを使用するための明確で簡潔なガイドを提供します。

重要な概念

• 制御されていない入力：これらは最も単純なアプローチです。 Reactは入力の状態を追跡しません。代わりに、提出時にDOM要素から値に直接アクセスします。 これは非常にシンプルなフォームに適しています。
• 制御された入力：Reactは入力の状態を管理します。これにより、優れた制御が提供され、リアルタイムの検証、フォーマット、条件付きレンダリング、動的入力生成が可能になります。 これは、ほとんどのシナリオで推奨されるアプローチです
リアルタイム検証：
• 制御されたコンポーネントは、ユーザーのタイプとして入力有効性に関する即時フィードバックを可能にし、ユーザーエクスペリエンスを向上させます。 サードパーティライブラリ：
• 制御されていない入力：基本的なアプローチ

制御されていない入力は、基礎となるDOMノードにアクセスするために参照を活用します。機能的なコンポーネントでの見た目は次のとおりです

クラスコンポーネントの場合、はコンストラクターで使用されます。 簡単ですが、制御されていない入力には、制御された対応物の機能がありません。

例：ログインフォーム（制御されていない）

function SimpleForm() {
  const nameEl = React.useRef(null);

  const handleSubmit = (e) => {
    e.preventDefault();
    alert(nameEl.current.value);
  };

  return (
    <form onSubmit={handleSubmit}>
      <label htmlFor="name">Name:</label>
      <input type="text" ref={nameEl} id="name" />
      <button type="submit">Submit</button>
    </form>
  );
}

リアルタイム検証または動的形式の動作が必要な場合、制御されていない入力の制限が明らかになります。 React.createRef()

制御された入力：強化された制御<

制御された入力は、Reactコンポーネント内の状態を維持します。入力の変更状態を更新し、状態の変更は入力を更新します。 この循環データフローは、実装する力を提供します：

function LoginForm() {
  // ... (refs for username, password, rememberMe) ...

  const handleSubmit = (e) => {
    e.preventDefault();
    const data = {
      username: nameEl.current.value,
      password: passwordEl.current.value,
      rememberMe: rememberMeEl.current.checked,
    };
    // ... (submit data) ...
  };

  return (
    <form onSubmit={handleSubmit}>
      {/* ... (input fields) ... */}
    </form>
  );
}

リアルタイム検証：

入力の正確性に関する即時フィードバックを提供します。

入力フォーマット：

フォーマット（たとえば、通貨、電話番号）を動的に適用します。

class ControlledInput extends React.Component {
  constructor(props) {
    super(props);
    this.state = { name: '' };
  }

  handleInput = (event) => {
    this.setState({ name: event.target.value });
  };

  render() {
    return (
      <input type="text" value={this.state.name} onChange={this.handleInput} />
    );
  }
}

条件付きレンダリング：

入力値に基づいて要素を表示/非表示にします。

• ダイナミック入力生成：ユーザーインタラクションに基づいて入力を追加します。
• 検証：リアルタイムフィードバック
• 制御された入力は、継続的な検証を有効にします。 クレジットカードの検証の簡略化された例（仮説関数を使用）を次に示します：
• フォームライブラリ：開発の合理化

新鮮なようなライブラリは、ボイラープレートを大幅に削減します。 簡単な例を次に示します

function SimpleForm() {
  const nameEl = React.useRef(null);

  const handleSubmit = (e) => {
    e.preventDefault();
    alert(nameEl.current.value);
  };

  return (
    <form onSubmit={handleSubmit}>
      <label htmlFor="name">Name:</label>
      <input type="text" ref={nameEl} id="name" />
      <button type="submit">Submit</button>
    </form>
  );
}

これらのライブラリは、州の管理、検証、および提出を処理し、開発をより効率的にします。

結論

制御された入力と制御されていない入力を理解することは、反応で効果的なフォーム処理に不可欠です。 制御されていない入力は単純なシナリオに適していますが、制御された入力はほとんどのアプリケーションに必要な柔軟性とパワーを提供します。 フォームライブラリを使用して、複雑なフォームの開発を合理化することを検討してください。 明確なフィードバックとエラー処理を通じてユーザーエクスペリエンスに優先順位を付けることを忘れないでください。

以上がReactのフォームを使用するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。