React-Bootstrap+Formik实现布尔单选按钮组组件遇问题求助

修复后的完整组件代码 #

import { useField, FieldProps } from 'formik';
import React from 'react';

type BooleanInputProps = FieldProps & {
  label?: string;
};

export const BooleanInput: React.FC<BooleanInputProps> = ({ label, ...props }) => {
  const [field, meta, helpers] = useField(props);

  const handleYesClick = () => {
    helpers.setValue(true);
  };

  const handleNoClick = () => {
    helpers.setValue(false);
  };

  return (
    <div>
      {label && <label>{label}</label>}
      <div style={{ display: 'flex', gap: '8px', marginTop: '4px' }}>
        <button
          type="button"
          onClick={handleYesClick}
          style={{
            padding: '4px 12px',
            backgroundColor: field.value ? '#2196F3' : '#e0e0e0',
            color: field.value ? 'white' : 'black',
            border: 'none',
            borderRadius: '4px',
            cursor: 'pointer',
          }}
        >
          Yes
        </button>
        <button
          type="button"
          onClick={handleNoClick}
          style={{
            padding: '4px 12px',
            backgroundColor: !field.value ? '#2196F3' : '#e0e0e0',
            color: !field.value ? 'white' : 'black',
            border: 'none',
            borderRadius: '4px',
            cursor: 'pointer',
          }}
        >
          No
        </button>
      </div>
      {meta.touched && meta.error && <div style={{ color: 'red', marginTop: '4px' }}>{meta.error}</div>}
    </div>
  );
};

问题原因及解决说明 #

1. 默认值被忽略的解决

   • 之前的代码大概率没有正确利用Formik的useField钩子绑定字段初始值。useField会自动关联Formik表单initialValues中对应字段的值到field.value，只要在Formik配置里正确设置了初始布尔值（比如{ agree: true }），组件就能自动读取并应用这个默认值。

2. TypeError: Cannot read properties of undefined (reading 'type')的解决

   • 这个错误是因为直接将布尔值传给Formik的handleChange方法，而handleChange期望接收包含target.type属性的事件对象，手动传值会导致事件对象未定义。
   • 改用Formik提供的helpers.setValue方法直接更新字段值，无需构造模拟事件，从根源避免了事件对象缺失的问题。

使用示例 #

import { Formik, Form } from 'formik';
import { BooleanInput } from './BooleanInput';

const App = () => {
  return (
    <Formik
      initialValues={{ agree: true }}
      onSubmit={(values) => console.log(values)}
    >
      <Form>
        <BooleanInput name="agree" label="Do you agree?" />
        <button type="submit">Submit</button>
      </Form>
    </Formik>
  );
};

export default App;

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