React を使った制御されていない入力フィールドのマスター

はじめに

この実験では、React を使って制御されていない入力フィールドを作成する方法を探ります。制御されていない入力フィールドは、親コンポーネントで値の状態を管理せずにユーザー入力をキャプチャするためのシンプルで柔軟な方法です。値の更新について親に通知するためにコールバック関数を使い、他のコンポーネントや API との統合を容易にします。

これは Guided Lab です。学習と実践を支援するためのステップバイステップの指示を提供します。各ステップを完了し、実践的な経験を積むために、指示に注意深く従ってください。過去のデータによると、この初級レベルの実験の完了率は 100%です。学習者から 100% の好評価を得ています。

制御されていない入力フィールド

VM には既にindex.htmlとscript.jsが用意されています。一般的には、script.jsとstyle.cssにのみコードを追加すればよいです。

このコードは、コールバック関数を使って親に値の更新を通知する制御されていない<input>要素をレンダリングします。それを使うには：

defaultValueプロップを使って親から初期値を渡します。
値の更新を処理するためのonValueChangeと呼ばれるコールバック関数を渡します。
onChangeイベントを使ってコールバックを実行し、新しい値を親に送信します。

以下は例です：

const UncontrolledInput = ({ defaultValue, onValueChange, ...rest }) => {
  return (
    <input
      defaultValue={defaultValue} target: { value } }) => onValueChange(value)}
      {...rest}
    />
  );
};

ReactDOM.createRoot(document.getElementById("root")).render(
  <UncontrolledInput
    type="text"
    placeholder="Insert some text here..."
  />
);

右下隅の「Go Live」をクリックして、ポート 8080 でウェブサービスを実行してください。その後、Web 8080タブを更新して、ウェブページをプレビューできます。

まとめ

おめでとうございます！制御されていない入力フィールドの実験を完了しました。技術力を向上させるために、LabEx でさらに多くの実験を行って練習してください。