RadioGroup在React中的使用技巧

在React中，可以使用RadioGroup組件來管理一組單選按鈕。以下是RadioGroup的使用技巧：

1. 使用useState來管理選中的值。在RadioGroup的父組件中定義一個useState來存儲選中的值，并通過onChange事件來更新這個值。

const [selectedValue, setSelectedValue] = useState('');

const handleChange = (event) => {
  setSelectedValue(event.target.value);
};

<RadioGroup value={selectedValue} onChange={handleChange}>
  <Radio value="option1">Option 1</Radio>
  <Radio value="option2">Option 2</Radio>
  <Radio value="option3">Option 3</Radio>
</RadioGroup>

2. 給RadioGroup設置value屬性和onChange事件。value屬性用于指定當前選中的值，onChange事件用于在選中值發生變化時更新state中的值。

3. 在Radio組件中，設置value屬性為每個單選按鈕的值，并給每個單選按鈕添加label。當用戶點擊單選按鈕時，RadioGroup會根據選中的值更新state中的值。

4. 可以通過defaultValue屬性設置默認選中的值。

<RadioGroup value={selectedValue} onChange={handleChange}>
  <Radio value="option1">Option 1</Radio>
  <Radio value="option2">Option 2</Radio>
  <Radio value="option3">Option 3</Radio>
</RadioGroup>

5. 添加label屬性給RadioGroup，用于顯示組的標簽。

<RadioGroup value={selectedValue} onChange={handleChange} label="Options">
  <Radio value="option1">Option 1</Radio>
  <Radio value="option2">Option 2</Radio>
  <Radio value="option3">Option 3</Radio>
</RadioGroup>

通過上述技巧，可以在React中方便地使用RadioGroup來管理一組單選按鈕。