چک باکس (Checkbox)

چک باکس در React شبیه همان تیک زدن فرم های کاغذی است؛ فقط این جا مغز ما state است. برای اینکه چک باکس در React درست کار کند، باید با ویژگی checked کنترلش کنیم، نه فقط با value. این طوری همیشه می دانی تیک خورده یا نه.

چک باکس در React چگونه کار می کند؟

در HTML معمولی، چک باکس خودش می داند تیک خورده یا نه؛ مرورگر نگه می دارد. اما در React، ما می خواهیم همه چیز در state ذخیره شود تا رابط کاربری کاملاً قابل پیش بینی باشد.

برای همین، چک باکس در React با ویژگی checked کنترل می شود. مقدار checked یک مقدار بولی (Boolean) است؛ یعنی فقط true یا false. مثل این که بگویی «تیک هست» یا «تیک نیست».

نکته: اگر فرم تو چند ورودی دارد، بهتر است همه چیز را با یک شیء state مدیریت کنی. این موضوع را در بخش چند ورودی در فرم مفصل دیدیم.

کنترل فرم چک باکس با useState

در این مثال، یک فرم داریم که نام کاربر و دو چک باکس برای Tomato و Onion می گیرد. با چک باکس ها مشخص می کنیم برگر با چه موادی ساخته شود؛ مثل سفارش در بوفه مدرسه.

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

function MyForm() {
  const [inputs, setInputs] = useState({});

  function handleChange(e) {
    const target = e.target;
    const value = target.type === 'checkbox'
      ? target.checked
      : target.value;
    const name = target.name;
    setInputs((values) => ({
      ...values,
      [name]: value
    }));
  }

  function handleSubmit(event) {
    let fillings = '';
    if (inputs.tomato) {
      fillings += 'tomato';
    }
    if (inputs.onion) {
      if (inputs.tomato) {
        fillings += ' and ';
      }
      fillings += 'onion';
    }
    if (fillings === '') {
      fillings = 'no fillings';
    }
    alert(`${inputs.firstname} wants a burger with ${fillings}`);
    event.preventDefault();
  }

  return (
    <form onSubmit={handleSubmit}>
      <label>
        My name is:
        <input
          type="text"
          name="firstname"
          value={inputs.firstname}
          onChange={handleChange}
        />
      </label>
      <p>
        I want a burger with:
      </p>
      <label>
        Tomato:
        <input
          type="checkbox"
          name="tomato"
          checked={inputs.tomato}
          onChange={handleChange}
        />
      </label>
      <label>
        Onion:
        <input
          type="checkbox"
          name="onion"
          checked={inputs.onion}
          onChange={handleChange}
        />
      </label>
      <button type="submit">
        Submit
      </button>
    </form>
  );
}

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

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

اینجا state به نام inputs داریم که همه فیلدها را نگه می دارد؛ از نام کاربر تا وضعیت چک باکس ها. تابع handleChange تشخیص می دهد ورودی از نوع checkbox است یا text و بر همین اساس value مناسب را در state ذخیره می کند.

نقش checked و target.checked در چک باکس

در HTML، مقدار تیک چک باکس با ویژگی checked مشخص می شود. در React هم همین است؛ فقط ما این checked را به state وصل می کنیم. خاصیت target.checked یک مقدار بولی است که می گوید تیک خورده یا نه.

در تابع handleChange، اگر type ورودی checkbox باشد، از target.checked استفاده می کنیم؛ اگر نه، از target.value. این طوری یک تابع برای همه ورودی ها جواب می دهد و فرم خیلی مرتب می شود.

نوشتن handleChange برای چک باکس

تابع handleChange قلب فرم است. این تابع روی همه input ها وصل می شود و بر اساس name تشخیص می دهد کدام فیلد تغییر کرده است.

function handleChange(e) {
  const target = e.target;
  const value = target.type === 'checkbox'
    ? target.checked
    : target.value;
  const name = target.name;
  setInputs((values) => ({
    ...values,
    [name]: value
  }));
}

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

عملگر ...values یعنی «همه مقادیر قبلی را نگه دار». بعد با [name]: value فقط همان فیلدی را که تغییر کرده به روزرسانی می کنیم. این تکنیک برای چک باکس، تکست، Select و بقیه ورودی ها عالی است.

گام به گام: ساخت فرم چک باکس در React

بیایید فرم چک باکس در React را مثل یک تمرین مدرسه ای، مرحله به مرحله انجام دهیم.

1. کامپوننت MyForm را بساز و useState را برای inputs تعریف کن.
2. برای نام کاربر یک input type="text" با name مساوی firstname بگذار.
3. دو چک باکس با name های tomato و onion ایجاد کن.
4. روی همه input ها onChange={handleChange} تنظیم کن.
5. روی فرم onSubmit={handleSubmit} بگذار و در handleSubmit از state بخوان.

نکته: اگر فرم تو فیلدهای دیگری مثل فیلد Textarea در React یا فیلد Select در React هم دارد، می توانی همه را با همین الگوی inputs مدیریت کنی.

مقدار اولیه برای فرم چک باکس

فرض کن فرم سفارش برگر از قبل بداند کاربر معمولاً چه دوست دارد؛ مثلاً همیشه گوجه می خواهد ولی پیاز نه. این اطلاعات را می توانیم به صورت مقدار اولیه در useState تنظیم کنیم.

function MyForm() {
  const [inputs, setInputs] = useState({
    firstname: 'John',
    tomato: true,
    onion: false
  });

  ...
}

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

در این حالت، وقتی کامپوننت رندر می شود، input متن با مقدار John پر است و چک باکس tomato تیک خورده و onion بدون تیک است. کاربر می تواند این انتخاب ها را عوض کند و state به روز می شود.

اگر خواستی کل مبحث چک باکس را دوباره ببینی، همیشه می توانی از منو به همین صفحه چک باکس در React برگردی و فرم خودت را با خیال راحت بسازی.

جمع بندی سریع چک باکس

• برای چک باکس در React از ویژگی checked استفاده کن، نه فقط value.
• state را با useState نگه دار و برای چند فیلد، یک شیء inputs بساز.
• در handleChange با target.type تشخیص بده ورودی چک باکس است یا نه.
• با target.checked مقدار true یا false چک باکس را بگیر.
• برای مقدار اولیه، کلیدهای firstname، tomato و onion را در useState تنظیم کن.