制御されていないテキストエリア要素

はじめに

この実験では、React において制御されていない <textarea> 要素を作成する方法を学びます。この実験の目的は、defaultValue と onChange のプロップを使用して、テキストエリアの値を親コンポーネント内のコールバック関数に渡す方法を示すことです。この実験が終了するまでに、React において制御されていない入力フィールドを作成する方法をより深く理解するようになります。

制御されていないテキストエリア要素

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

この関数は、親コンポーネントによって制御されていない <textarea> 要素をレンダリングします。入力値を親コンポーネントに渡すためにコールバック関数を使用します。

この関数を使用するには：

• 親コンポーネントから defaultValue プロップを渡して、入力フィールドの初期値とします。
• onChange イベントを使用して、onValueChange コールバックをトリガーし、新しい値を親に送信します。

const TextArea = ({
  cols = 20,
  rows = 2,
  defaultValue,
  onValueChange,
  ...rest
}) => {
  return (
    <textarea
      cols={cols}
      rows={rows}
      defaultValue={defaultValue}
      onChange={({ target: { value } }) => onValueChange(value)}
      {...rest}
    />
  );
};

使用例：

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

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

まとめ

おめでとうございます！制御されていないテキストエリア要素の実験を完了しました。あなたのスキルを向上させるために、LabEx でさらに多くの実験を行って練習してください。