在React中,可以使用onChange事件來綁定radio選中事件。當radio按鈕選中狀態發生變化時,onChange事件會被觸發。你可以在onChange事件處理函數中處理選中狀態的改變。
例如,下面是一個簡單的示例代碼:
import React, { useState } from 'react';
function RadioComponent() {
const [selectedValue, setSelectedValue] = useState('');
const handleRadioChange = (e) => {
setSelectedValue(e.target.value);
}
return (
<div>
<input type="radio" value="option1" checked={selectedValue === 'option1'} onChange={handleRadioChange} />
<label>Option 1</label>
<input type="radio" value="option2" checked={selectedValue === 'option2'} onChange={handleRadioChange} />
<label>Option 2</label>
<input type="radio" value="option3" checked={selectedValue === 'option3'} onChange={handleRadioChange} />
<label>Option 3</label>
<p>Selected value: {selectedValue}</p>
</div>
);
}
export default RadioComponent;
在這個示例中,我們使用useState來管理radio按鈕的選中狀態,并在handleRadioChange函數中更新selectedValue的值。每個radio按鈕都有一個onChange事件,當選中狀態發生變化時,handleRadioChange函數會被調用。最后,我們在頁面上展示當前選中的值。