چطور در ReactJS از دکمه‌های رادیویی استفاده کنیم؟

استفاده از دکمه‌های رادیویی در ReactJS خیلی ساده‌ست. می‌تونی از useState برای مدیریت وضعیت (state) انتخابی استفاده کنی.
یه مثال ساده اینجا برات می‌ذارم:

import React, { useState } from "react";
function App() {
const [selectedOption, setSelectedOption] = useState("option1");
const handleOptionChange = (event) => {
setSelectedOption(event.target.value);
};
return (
<div>
<h2>Select an option:</h2>
<div>
<input
type="radio"
value="option1"
checked={selectedOption === "option1"}
onChange={handleOptionChange}
/>
Option 1
</div>
<div>
<input
type="radio"
value="option2"
checked={selectedOption === "option2"}
onChange={handleOptionChange}
/>
Option 2
</div>
<div>
<input
type="radio"
value="option3"
checked={selectedOption === "option3"}
onChange={handleOptionChange}
/>
Option 3
</div>
<div>
<h3>You selected: {selectedOption}</h3>
</div>
</div>
);
}
export default App;

تو این مثال، سه دکمه رادیویی داریم که هر کدومشون یک مقدار متفاوت دارن (option1، option2، و option3). وقتی کاربر یکی از این گزینه‌ها رو انتخاب می‌کنه، تابع handleOptionChange اجرا می‌شه و وضعیت (selectedOption) رو به مقدار جدید تغییر می‌ده. با استفاده از خاصیت checked، ما بررسی می‌کنیم که آیا گزینه‌ای که کاربر انتخاب کرده، همون گزینه‌ای هست که باید تیک خورده باشه یا نه.

این کار باعث می‌شه که فقط یکی از دکمه‌های رادیویی در هر زمان فعال باشه. امیدوارم این توضیح کمکت کرده باشه!