چگونه می‌توان حالت بولین یک کامپوننت React را تغییر داد؟

برای این کار، باید ابتدا state مربوط به اون بولین رو با استفاده از هوک useState تعریف کنی. بعد می‌تونی از تابع setter که این هوک در اختیارت می‌ذاره استفاده کنی تا مقدار isOn رو با هر کلیک روی دکمه، تغییر بدی. این کار رو می‌تونی با یک تابع که مقدار فعلی state رو می‌گیره و برعکسش رو برمی‌گردونه انجام بدی.

کد زیر رو نگاه کن:

import React, { useState } from 'react';
function ToggleButton() {
  // Define the state variable and its setter function
  const [isOn, setIsOn] = useState(false);
  // Function to toggle the state
  const toggleIsOn = () => {
   setIsOn(prevIsOn => !prevIsOn);
  };
  return (
   <button onClick={toggleIsOn}>
    {isOn ? 'ON' : 'OFF'}
   </button>
  );
}
export default ToggleButton;

توضیحات کد:

1. useState رو از React وارد کردیم و یه state به نام isOn با مقدار ابتدایی false ایجاد کردیم.
2. تابع toggleIsOn که برای تغییر مقدار isOn استفاده می‌شه، با استفاده از مقدار قبلی state، مقدار جدید رو به صورت برعکس (!prevIsOn) تنظیم می‌کنه.
3. داخل JSX، دکمه‌ای داریم که وقتی روش کلیک می‌کنی، تابع toggleIsOn فراخوانی می‌شه و متن دکمه بر اساس مقدار isOn بین "ON" و "OFF" تغییر می‌کنه.

این روش بهترین و ساده‌ترین راه برای تغییر حالت بولین در یک کامپوننت React است. اگر نیاز به هر گونه سفارشی‌سازی داشتی، می‌تونی تابع toggleIsOn رو بر اساس نیازت تغییر بدی.