انتخاب گزینه selected در تگ select با استفاده از React JS

خب، وقتی توی React از تگ <select> استفاده می‌کنی و می‌خوای یکی از گزینه‌ها به صورت پیش‌فرض انتخاب شده باشه، باید از خاصیت value روی تگ <select> استفاده کنی. این کار باعث می‌شه که React خودش به صورت خودکار گزینه‌ی انتخاب شده رو مشخص کنه.

فرض کنیم تو یه state داری که مقدار انتخاب شده رو ذخیره می‌کنه:

import React, { useState } from 'react';
function MyComponent() {
   const [selectedValue, setSelectedValue] = useState('option2'); // Default Value
  return (
   <select value={selectedValue} onChange={(e) => setSelectedValue(e.target.value)}>
   <option value="option1">Option 1</option>
   <option value="option2">Option 2</option>
   <option value="option3">Option 3</option>
   </select>
);
}
export default MyComponent;

در این مثال، مقدار selectedValue توی state به option2 ست شده و این گزینه به صورت پیش‌فرض انتخاب می‌شه. هر وقت کاربر یه گزینه‌ی دیگه رو انتخاب کنه، مقدار selectedValue تغییر می‌کنه و رندر شدن component آپدیت می‌شه.

نکته‌ی مهم اینه که توی React دیگه لازم نیست از خاصیت selected روی هر گزینه‌ی تکی استفاده کنی. به جاش از value روی تگ <select> استفاده کن و React خودش بقیه‌ی کارها رو هندل می‌کنه. این روش هم تمیزتره و هم با ساختار React همخوانی بیشتری داره.