React函数式组件如何处理单选框组及编写对应的onChange处理函数

修正后完整实现代码 #

import { useState } from 'react';
import { Form } from 'react-bootstrap';

function YourComponent() {
  // 初始值设置为默认选中项的value，替换原布尔值
  const [radioOption, setRadioOption] = useState("All devices")

  // 从事件对象中获取选中值更新状态
  const handleRadioChange = (e) => {
    setRadioOption(e.target.value)
  }

  return(
    <>
      <Form.Group 
        inline 
        style={{
          display:'flex',  
          justifyContent:'space-between'
        }}
      >
        <Form.Radio
          onChange={handleRadioChange}
          value="All devices"
          label='All devices' 
          checked={radioOption === "All devices"}
        />

        <Form.Radio
          onChange={handleRadioChange}
          value='Mobile only'
          label='Mobile only'
          checked={radioOption === "Mobile only"}
        />

        <Form.Radio
          onChange={handleRadioChange}
          value='Desktop only'
          label='Desktop only'
          checked={radioOption === "Desktop only"}
        />
      </Form.Group>
    </>
  )
}

核心调整点 #

• 修正state初始值：将原来的布尔类型初始值替换为默认选中项对应的value字符串，和单选框的value属性类型保持对齐
• 完善onChange处理逻辑：通过事件对象e拿到当前触发选中的单选框value，直接更新到状态中即可
• 切换为受控组件模式：删除defaultChecked属性，改用checked属性绑定状态判断逻辑，让单选框的选中状态完全由React state托管，避免状态不同步问题

内容的提问来源于stack exchange，提问作者Pruthvi mohan