如何在React中绑定单选事件

分类：编程技术时间：2024-06-16 02:04 浏览：0 评论：0

在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 1label>      <input type="radio" value="option2" checked={selectedValue === 'option2'} onChange={handleRadioChange} />      <label>Option 2label>      <input type="radio" value="option3" checked={selectedValue === 'option3'} onChange={handleRadioChange} />      <label>Option 3label>      <p>Selected value: {selectedValue}p>    div>  );}export default RadioComponent;

在这个示例中，我们使用useState来管理radio按钮的选中状态，并在handleRadioChange函数中更新selectedValue的值。每个radio按钮都有一个onChange事件，当选中状态发生变化时，handleRadioChange函数会被调用。最后，我们在页面上展示当前选中的值。

radio