基于Formik的React单选按钮实现label可点击功能的问题咨询

要实现点击label文本自动切换单选按钮选中状态，直接基于原生HTML规则调整代码结构即可，不需要额外绑定点击事件，适配Formik的修改方案如下：

核心实现逻辑 #

利用原生HTML的<label>标签关联规则：要么给<label>设置htmlFor属性匹配对应<input>的唯一id，要么把<input>直接包裹在<label>内部，浏览器会自动实现点击label触发input的状态切换，避免手动绑定外层点击事件导致的冒泡问题。

调整后代码示例（推荐方案） #

<Wrapper>
  {/* 自定义Item组件通过as属性转为label标签，绑定htmlFor匹配input id */}
  <Item 
    as="label"
    htmlFor={`${name}-${value}`}
  >
    <Button
      type="radio"
      {/* 修正id为唯一值，同组单选name相同不可直接作为id使用 */}
      id={`${name}-${value}`}
      name={name}
      value={value}
      checked={checked}
      onChange={handleChecked}
    />
    <RadioButtonLabel />
    <div>{label}</div>
    {error && touched && <TextError>{error}</TextError>}
  </Item>
</Wrapper>

调整后可直接删除原来给Item绑定的onClick={handleChecked}，不需要额外JS逻辑即可实现label点击触发选中。

Formik适配优化 #

如果使用Formik可以直接通过useField钩子自动绑定表单属性，不需要手动维护checked和handleChecked逻辑，简化代码：

import { useField } from 'formik';

// 单选组件定义示例
const Radio = ({ name, value, label, ...rest }) => {
  // 自动绑定Formik的表单状态、变更事件、校验信息
  const [field, meta] = useField({ name, type: 'radio', value });
  return (
    <Wrapper>
      <Item as="label" htmlFor={`${name}-${value}`}>
        <Button
          type="radio"
          id={`${name}-${value}`}
          {...field}
          {...rest}
        />
        <RadioButtonLabel />
        <div>{label}</div>
        {meta.error && meta.touched && <TextError>{meta.error}</TextError>}
      </Item>
    </Wrapper>
  )
}

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