はじめに
この実験では、コールバック関数を使ってReactで制御されていない<select>
要素を作成し、その値を親コンポーネントに渡す方法を学びます。<select>
要素の初期値を設定するためにselectedValue
プロップを使い、新しい値を親に送信するためにonChange
イベントを使います。この実験では、渡された各値に対して<option>
要素を作成するためにArray.prototype.map()
をどのように使うかも説明します。
This tutorial is from open-source community. Access the source code
💡 このチュートリアルは英語版からAIによって翻訳されています。原文を確認するには、 ここをクリックしてください
この実験では、コールバック関数を使ってReactで制御されていない<select>
要素を作成し、その値を親コンポーネントに渡す方法を学びます。<select>
要素の初期値を設定するためにselectedValue
プロップを使い、新しい値を親に送信するためにonChange
イベントを使います。この実験では、渡された各値に対して<option>
要素を作成するためにArray.prototype.map()
をどのように使うかも説明します。
<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でさらに多くの実験を行って練習してください。