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

ReactReactBeginner
今すぐ練習

This tutorial is from open-source community. Access the source code

💡 このチュートリアルは英語版からAIによって翻訳されています。原文を確認するには、 ここをクリックしてください

はじめに

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


Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL react(("React")) -.-> react/FundamentalsGroup(["Fundamentals"]) react/FundamentalsGroup -.-> react/event_handling("Handling Events") subgraph Lab Skills react/event_handling -.-> lab-38365{{"制御されていないテキストエリア要素"}} end

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

VM 内には既に index.htmlscript.js が用意されています。一般的には、script.jsstyle.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でさらに多くの実験を行って練習してください。