فیلد Textarea (Textarea)

در فرم ها وقتی متن طولانی می خواهیم، از فیلد Textarea در React استفاده می کنیم. این فیلد شبیه input است اما برای چند خط متن است، مثل توضیح، آدرس یا متن انشا.

تفاوت Textarea در HTML و Textarea در React

در HTML معمولی، متن داخل تگ <textarea> نوشته می شود. یعنی محتوای بین تگ باز و بسته مقدار فیلد است.

<textarea>
  Content of the textarea.
</textarea>

مشاهده در ادیتور

اما در Textarea در React، مقدار داخل attribute به نام value قرار می گیرد. یعنی مثل input با value و onChange کار می کند و یک کامپوننت کنترل شده است.

Textarea در React به عنوان کامپوننت کنترل شده

در React معمولاً مقدار Textarea را داخل state نگه می داریم. state یعنی جایی که داده فعلی کامپوننت ذخیره می شود و با useState ساخته می شود.

در مثال زیر، Textarea در React با value به state وصل شده است. هر تغییری در Textarea، با تابع handleChange state را به روزرسانی می کند.

import { createRoot } from "react-dom/client";
import { useState } from "react";

function MyForm() {
  const [mytxt, setMytxt] = useState("");

  function handleChange(e) {
    setMytxt(e.target.value);
  }

  return (
    <form>
      <label>
        Write here:
        <textarea
          value={mytxt}
          onChange={handleChange}
        />
      </label>
      <p>
        Current value: {mytxt}
      </p>
    </form>
  );
}

createRoot(document.getElementById("root")).render(
  <MyForm />
);

مشاهده در ادیتور

گام به گام کنترل Textarea در React

بیایید Textarea در React را مرحله به مرحله مثل یک بازی رد کنیم.

1. 1. با useState یک state مثل mytxt می سازیم.
2. 2. روی Textarea پراپس value را برابر همین state می گذاریم.
3. 3. روی Textarea یک onChange قرار می دهیم تا تغییرات را بگیرد.
4. 4. در تابع handleChange مقدار جدید را با setMytxt ذخیره می کنیم.
5. 5. در خروجی، مقدار را نمایش می دهیم تا ببینیم state همیشه همزمان با Textarea در React است.

اگر دوست داری ارتباط textarea با ارسال فرم را ببینی، بخش ارسال فرم در React را هم حتماً نگاه کن. آن جا می بینی این Textarea در React چطور داخل یک فرم واقعی استفاده می شود.

برای مرور کوتاه، صفحه Textarea در React همیشه نقطه خوبی برای شروع دوباره است.

جمع بندی سریع فیلد Textarea در React

• در HTML متن بین تگ های <textarea> نوشته می شود.
• در Textarea در React مقدار با پراپس value کنترل می شود.
• برای همگام سازی مقدار از useState و onChange استفاده کن.
• React با این مدل، Textarea را مثل سایر input ها مدیریت می کند.
• در فرم های طولانی، Textarea در React بهترین گزینه نوشتن توضیحات است.