React中Radio Button单选按钮点击label触发选中功能的实现问题

实现点击label触发单选选中的两种方案 #

方案1：id+htmlFor原生关联

这是最符合HTML标准的实现方式，只需要在你的RadioButton组件内部做两个调整：

• 给<input type="radio">元素添加唯一的id属性，属性值可以用${name}-${value}拼接，保证同组单选框id不重复
• 给包裹label文本的<label>元素添加htmlFor属性，属性值和上面input的id完全对应
  React里label的关联属性是htmlFor不是原生的for，不要写错

方案2：input嵌套进label标签

直接在组件内部把单选input和label文本都包裹在同一个<label>标签里，不需要加任何id、htmlFor属性，原生就支持点击label任意区域触发input的选中事件，实现更简洁，也不会出现id重复的冲突问题。

组件内部核心代码示例（以方案2为例） #

const RadioButton = ({label, name, value, checked, handleChange}) => {
  return (
    <label style={{cursor: 'pointer'}}>
      <input
        type="radio"
        name={name}
        value={value}
        checked={checked}
        onChange={handleChange}
        style={{marginRight: '8px'}}
      />
      <span>{label}</span>
    </label>
  )
}

你原来的组件调用代码不需要做任何修改，只要调整RadioButton内部的结构即可生效。

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