دکمه های رادیویی (Radio)

دکمه های رادیویی در React برای انتخاب یک گزینه از چند گزینه است. مثل وقتی در فرم مدرسه فقط یک پایه را تیک می زنی. در این بخش می بینیم چطور state این انتخاب ها را نگه دارد.

کار با دکمه های رادیویی در React

دکمه رادیویی (Radio Button) دکمه ای است که فقط یکی از گروهش می تواند انتخاب شود. همه دکمه های رادیویی در یک گروه باید name یکسان داشته باشند. در React مقدار انتخاب شده را در state نگه می داریم و با ویژگی checked کنترل می کنیم.

اینجا state ما نام میوه انتخابی را نگه می دارد. سپس برای هر دکمه رادیویی بررسی می کنیم آیا value آن با مقدار state برابر است یا نه.

مثال کامل دکمه های رادیویی در React

در این مثال، کاربر می تواند یکی از میوه ها را به عنوان میوه محبوب انتخاب کند. دکمه های رادیویی در React با ویژگی checked و state کنترل می شوند.

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

function MyForm() {
  const [selectedFruit, setSelectedFruit] = useState('banana');

  function handleChange(event) {
    setSelectedFruit(event.target.value);
  }

  function handleSubmit(event) {
    alert(`Your favorite fruit is: ${selectedFruit}`);
    event.preventDefault();
  }

  return (
    <form onSubmit={handleSubmit}>
      <p>
        Select your favorite fruit:
      </p>
      <label>
        <input
          type="radio"
          name="fruit"
          value="apple"
          checked={selectedFruit === 'apple'}
          onChange={handleChange}
        />
        Apple
      </label>
      <br />
      <label>
        <input
          type="radio"
          name="fruit"
          value="banana"
          checked={selectedFruit === 'banana'}
          onChange={handleChange}
        />
        Banana
      </label>
      <br />
      <label>
        <input
          type="radio"
          name="fruit"
          value="orange"
          checked={selectedFruit === 'orange'}
          onChange={handleChange}
        />
        Orange
      </label>
      <br />
      <button type="submit">
        Submit
      </button>
    </form>
  );
}

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

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

state به نام selectedFruit مقدار میوه انتخابی را نگه می دارد. هر دکمه رادیویی name یکسان fruit دارد تا در یک گروه باشند. ویژگی checked برابر با یک مقایسه است؛ اگر selectedFruit برابر value باشد، آن دکمه تیک می خورد.

نقش name و checked در دکمه های رادیویی

ویژگی name دکمه های رادیویی را در یک گروه قرار می دهد. وقتی name همه یکی است، مرورگر فقط یک گزینه را انتخاب شده نگه می دارد.

در React دکمه های رادیویی را با checked کنترل می کنیم. اگر عبارت selectedFruit === 'apple' درست باشد، دکمه مربوط به Apple تیک می خورد. اگر کاربر Banana را انتخاب کند، state عوض می شود و تیک ها دوباره رندر می شوند.

تابع handleChange برای دکمه های رادیویی

تابع handleChange ساده است؛ فقط مقدار value دکمه انتخاب شده را می خواند. سپس همان مقدار را در state می گذارد.

function handleChange(event) {
  const value = event.target.value;
  setSelectedFruit(value);
}

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

event.target یعنی همان inputی که کاربر روی آن کلیک کرده است. value آن اسم میوه است؛ مثلاً apple یا banana. با setSelectedFruit این مقدار در state ذخیره می شود و دکمه های رادیویی دوباره با وضعیت درست نمایش داده می شوند.

گام به گام ساخت فرم دکمه های رادیویی

بیایید ساخت یک فرم دکمه های رادیویی در React را مرحله به مرحله جلو ببریم؛ مثل پر کردن فرم انتخاب رشته در مدرسه.

1. کامپوننت MyForm را بساز و useState برای selectedFruit تعریف کن.
2. برای هر گزینه میوه یک input با type="radio" قرار بده.
3. name همه دکمه ها را برابر fruit بگذار تا گروه شوند.
4. برای هر دکمه، value متفاوت مانند apple یا banana تعریف کن.
5. ویژگی checked را با selectedFruit === 'value' تنظیم کن.
6. روی همه دکمه ها onChange={handleChange} قرار بده.
7. در handleSubmit مقدار selectedFruit را بخوان و استفاده کن.

نکته: اگر فرم تو ورودی های دیگری مثل چک باکس در React یا فرم ها در React هم دارد، می توانی همه را در یک فرم ترکیب کنی.

جمع بندی سریع دکمه های رادیویی

• دکمه های رادیویی در React همیشه در گروه های name یکسان قرار می گیرند.
• state مانند selectedFruit مقدار گزینه انتخاب شده را نگه می دارد.
• ویژگی checked با مقایسه state و value کنترل می شود.
• تابع handleChange فقط value دکمه کلیک شده را در state می گذارد.
• برای مرور، همیشه می توانی به صفحه دکمه های رادیویی در React برگردی.