React-Bootstrap 无线电输入作为带有 formik 的按钮组

Question

我正在尝试让单选按钮显示为按钮组，其中按钮是/否作为可重复使用的反应组件，也使用 formik ..

const BooleanInput = (
  props: { label: string; size: number } & FieldHookConfig<string>
) => {
  const [field, meta] = useField(props);

  console.log(`label: ${props.label} value: ${!!field.value}`)
  return (
    <Form.Group as={Col} md={props.size}>
      <Form.Label>{props.label}</Form.Label>
      <ButtonToolbar>
        <ToggleButtonGroup
          name={field.name}
          type='radio'
          value={field.value}
          size='sm'
          onChange={field.onChange}
          defaultValue={+!!field.value}
        >
          <ToggleButton
            id={field.name}
            variant='outline-secondary'
            value={1}
          >
            Yes
          </ToggleButton>
          <ToggleButton
            id={field.name}
            variant='outline-secondary'
            value={0}
          >
            No
          </ToggleButton>
        </ToggleButtonGroup>
      </ButtonToolbar>
    </Form.Group>
  );
};

从 formik 字段传递的值是一个布尔值，正在设置这些值，但默认值被忽略，当我单击按钮时，我收到打字稿错误： TypeError: Cannot readproperties of undefined (reading 'type') 。非常感谢任何帮助。

Answer 1

最终解决了这个问题，useField hook 中有一些辅助函数，其中包括 setValue，因此您可以执行以下操作，而不是直接使用 field.onChange ..

<ToggleButtonGroup
  type='radio'
  value={+field.value}
  name={field.name}
  onChange={(option, action) => {
    helpers.setValue(option)
  }}
>