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

はじめに

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

Skills Graph

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

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

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

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

以下は例です：

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

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

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

まとめ

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