制御されていない範囲入力

はじめに

この実験では、React において、ユーザーが水平線に沿ってボタンをスライドさせることで数値の範囲から値を選択できる、制御されていない範囲入力要素を作成する方法を探ります。選択された値を親コンポーネントに渡すためにコールバック関数を使用します。この実験が終了するまでに、React における onChange イベントと defaultValue プロパティの使い方をより深く理解するようになります。

制御されていない範囲入力

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

React でスライダーを作成するには、Slider コンポーネントを使用し、min、max、defaultValue、および onValueChange の各プロパティを渡します。

Slider コンポーネントでは、<input> 要素の type を "range" に設定してスライダーを作成します。親から渡された defaultValue プロパティを、制御されていない入力フィールドの初期値として使用します。onChange イベントを使用して、onValueChange コールバックをトリガーし、新しい値を親に送信します。

以下は、Slider コンポーネントのコードです。

const Slider = ({
  min = 0,
  max = 100,
  defaultValue,
  onValueChange,
  ...rest
}) => {
  return (
    <input
      type="range"
      min={min}
      max={max}
      defaultValue={defaultValue}
      onChange={({ target: { value } }) => onValueChange(value)}
      {...rest}
    />
  );
};

Slider コンポーネントをレンダリングするには、ReactDOM.createRoot を使用して、onValueChange コールバック関数を渡します。

ReactDOM.createRoot(document.getElementById("root")).render(
  <Slider onValueChange={(val) => console.log(val)} />
);

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

まとめ

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