فیلد Select (Select)

برای ساخت لیست کشویی یا DropDown در فرم ها، از فیلد Select در React استفاده می کنیم. این فیلد به کاربر اجازه می دهد یکی از چند گزینه را انتخاب کند؛ مثل انتخاب ماشین مورد علاقه یا پایه تحصیلی.

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

در HTML معمولی، گزینه انتخاب شده با attribute به نام selected روی خود تگ <option> مشخص می شود.

<select>
  <option value="Ford">
    Ford
  </option>
  <option value="Volvo" selected>
    Volvo
  </option>
  <option value="Fiat">
    Fiat
  </option>
</select>

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

اما در Select در React، گزینه انتخاب شده روی خود تگ <select> و با پراپس value کنترل می شود. یعنی React می گوید «الان مقدار Select در React این است» و رابط کاربر را با آن هماهنگ می کند.

کنترل فیلد Select در React با state

در React معمولاً مقدار Select در React را داخل state نگه می داریم. state یعنی وضعیت فعلی کامپوننت؛ مثل اینکه الان کدام ماشین انتخاب شده است.

در مثال زیر، از useState برای نگه داشتن نام ماشین و از تابع handleChange برای به روزرسانی state استفاده می کنیم.

function MyForm() {
  const [myCar, setMyCar] = useState("Volvo");

  const handleChange = (event) => {
    setMyCar(event.target.value);
  };

  return (
    <form>
      <select
        value={myCar}
        onChange={handleChange}
      >
        <option value="Ford">
          Ford
        </option>
        <option value="Volvo">
          Volvo
        </option>
        <option value="Fiat">
          Fiat
        </option>
      </select>
    </form>
  );
}

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

گام به گام ساخت Select در React

بیایید Select در React را مثل ساخت منوی انتخاب در یک بازی قدم به قدم بسازیم.

1. 1. با useState یک state مثل myCar درست کن.
2. 2. مقدار اولیه state را روی گزینه پیش فرض، مثلاً "Volvo" بگذار.
3. 3. روی تگ <select> پراپس value را برابر myCar تنظیم کن.
4. 4. رویداد onChange را ست کن تا تابع handleChange را صدا بزند.
5. 5. در handleChange مقدار جدید را از event.target.value گرفته و با setMyCar ذخیره کن.

اگر دوست داری ببینی Select در React کنار Textarea و input چطور کار می کند، حتماً به صفحه فرم ها در React سر بزن تا تصویر کامل تری از فرم های کنترل شده بگیری.

همچنین برای متن های چندخطی می توانی از فیلد Textarea در React استفاده کنی و آن را دقیقاً مثل Select در React با state کنترل کنی.

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

• Select در HTML با attribute به نام selected روی گزینه کار می کند.
• Select در React با پراپس value روی خود <select> کنترل می شود.
• برای کنترل Select در React از useState و onChange استفاده کن.
• با این روش، Select در React مثل بقیه input ها یک کامپوننت کنترل شده است.
• لیست کشویی در فرم های واقعی، مثل انتخاب شهر یا ماشین، با همین الگو ساخته می شود.