如何在react中更改输入类型单选按钮的选中状态

在React中更改输入类型单选按钮（radio button）的选中状态，通常涉及到组件的状态管理。以下是一个基本的示例，展示了如何使用React的useState钩子来管理单选按钮的选中状态。

基础概念

React Hooks: useState是React的一个Hook，它允许你在函数组件中添加状态。
状态管理: 在React中，状态是决定组件行为和渲染输出的关键因素。

示例代码

import React, { useState } from 'react';

function RadioButtonExample() {
  // 初始化状态，设置默认选中的值
  const [selectedValue, setSelectedValue] = useState('option1');

  // 处理单选按钮变化的函数
  const handleRadioChange = (event) => {
    setSelectedValue(event.target.value);
  };

  return (
    <div>
      <label>
        <input
          type="radio"
          value="option1"
          checked={selectedValue === 'option1'}
          onChange={handleRadioChange}
        />
        Option 1
      </label>
      <label>
        <input
          type="radio"
          value="option2"
          checked={selectedValue === 'option2'}
          onChange={handleRadioChange}
        />
        Option 2
      </label>
      <label>
        <input
          type="radio"
          value="option3"
          checked={selectedValue === 'option3'}
          onChange={handleRadioChange}
        />
        Option 3
      </label>
    </div>
  );
}

export default RadioButtonExample;