react如何获取单选框被选中的值

获取单选框选中值的方法

在React中，可以通过受控组件的方式获取单选框（radio button）的选中值。以下是一种常见的实现方式：

定义状态管理选中值

const [selectedValue, setSelectedValue] = useState('');

渲染单选框组并绑定事件

<div>
  <input
    type="radio"
    id="option1"
    name="options"
    value="option1"
    checked={selectedValue === 'option1'}
    onChange={(e) => setSelectedValue(e.target.value)}
  />
  <label htmlFor="option1">Option 1</label>
</div>

<div>
  <input
    type="radio"
    id="option2"
    name="options"
    value="option2"
    checked={selectedValue === 'option2'}
    onChange={(e) => setSelectedValue(e.target.value)}
  />
  <label htmlFor="option2">Option 2</label>
</div>

获取当前选中值 选中的值会存储在selectedValue状态变量中，可以直接在需要的地方使用：

console.log('当前选中的值是:', selectedValue);

使用表单提交时的处理

如果单选框包含在表单中，可以结合表单提交事件获取选中值：

表单处理示例

const handleSubmit = (e) => {
  e.preventDefault();
  console.log('提交的选中值是:', selectedValue);
};

return (
  <form onSubmit={handleSubmit}>
    {/* 单选框代码同上 */}
    <button type="submit">提交</button>
  </form>
);

动态生成单选框组

对于动态生成的选项，可以使用数组映射的方式：

const options = [
  { id: 'opt1', value: 'option1', label: 'Option 1' },
  { id: 'opt2', value: 'option2', label: 'Option 2' },
];

return (
  <div>
    {options.map((option) => (
      <div key={option.id}>
        <input
          type="radio"
          id={option.id}
          name="dynamicOptions"
          value={option.value}
          checked={selectedValue === option.value}
          onChange={(e) => setSelectedValue(e.target.value)}
        />
        <label htmlFor={option.id}>{option.label}</label>
      </div>
    ))}
  </div>
);

这种方法适用于任何需要获取单选框选中值的场景，通过React的状态管理可以轻松跟踪和更新当前选中的选项。