radio选中事件在React中怎样绑定

avatar
作者
猴君
阅读量:7

在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函数会被调用。最后,我们在页面上展示当前选中的值。

广告一刻

为您即时展示最新活动产品广告消息,让您随时掌握产品活动新动态!