React中如何通过点击按钮收集单选框（radio）的选中信息？

要实现点击按钮时获取选中的单选框选项，你可以按以下步骤修改代码：

• 给每个单选框添加value属性，明确每个选项对应的值，方便后续识别
• 用React的useState钩子存储当前选中的单选框值
• 给单选框绑定onChange事件，选中时更新状态
• 给按钮绑定onClick事件，点击时读取状态里的选中值

完整代码示例 #

import { useState } from 'react';

// 假设C是你导入的组件库
const YourComponent = () => {
  // 初始化选中状态，默认设为空
  const [selectedOption, setSelectedOption] = useState('');

  // 单选框变化时更新状态
  const handleRadioChange = (e) => {
    setSelectedOption(e.target.value);
  };

  // 按钮点击时处理选中值
  const handleSubmit = () => {
    if (selectedOption) {
      console.log('选中的选项是:', selectedOption);
      // 这里可以添加提交数据或其他业务逻辑
    } else {
      console.log('请选择一个选项');
    }
  };

  return (
    <C.Container>
      <C.SingleCard>
        <C.Radiocard>
          <h4>One Option</h4>
          <input 
            type="radio" 
            name="topping2" 
            value="option1" 
            onChange={handleRadioChange}
            checked={selectedOption === 'option1'} // 受控组件写法，确保选中状态与状态同步
          />
        </C.Radiocard>
        <C.Radiocard>
          <h4>Two Option</h4>
          <input 
            type="radio" 
            name="topping2" 
            value="option2" 
            onChange={handleRadioChange}
            checked={selectedOption === 'option2'} // 受控组件写法，确保选中状态与状态同步
          />
        </C.Radiocard>
        <C.Button onClick={handleSubmit}> 
          send
        </C.Button>
      </C.SingleCard>
    </C.Container>
  );
};

export default YourComponent;

关键说明 #

• value属性：每个单选框的value要唯一，这样选中时能明确对应哪个选项
• useState：维护组件内部的选中状态，状态变化时组件会自动重新渲染
• onChange事件：单选框选中状态改变时，将对应value存入状态
• 标签修正：原代码里的</C.Radiocard缺少闭合的>，已经在示例中修复，避免渲染错误

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