制御されていない `<select>` 要素

制御されていない<select>要素

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

これは、制御された<select>要素をレンダリングするコンポーネントです。このコンポーネントは、値の配列とコールバック関数を受け取り、選択された値を親コンポーネントに渡します。このコンポーネントを使用する手順は以下の通りです。

• selectedValueプロップを使用して<select>要素の初期値を設定します。
• onValueChangeプロップを使用して、<select>要素の値が変更されたときに呼び出されるコールバック関数を指定します。
• values配列に対してArray.prototype.map()を使用して、渡された各値に対して<option>要素を作成します。
• valuesの各項目は2要素の配列である必要があり、最初の要素は項目のvalueで、2番目の要素はその表示テキストです。

const Select = ({ values, onValueChange, selectedValue, ...rest }) => {
  return (
    <select
      defaultValue={selectedValue}
      onChange={({ target: { value } }) => onValueChange(value)}
      {...rest}
    >
      {values.map(([value, text]) => (
        <option key={value} value={value}>
          {text}
        </option>
      ))}
    </select>
  );
};

このコンポーネントを使用する方法の例は以下の通りです。

const choices = [
  ["grapefruit", "Grapefruit"],
  ["lime", "Lime"],
  ["coconut", "Coconut"],
  ["mango", "Mango"]
];

ReactDOM.createRoot(document.getElementById("root")).render(
  <Select
    values={choices}
    selectedValue="lime"
    onValueChange={(val) => console.log(val)}
  />
);

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

まとめ

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