reactjs - 无法让 Material UI 单选按钮与 Formik 一起使用

Question

我正在尝试将 Material UI 单选按钮与 Formik 一起使用，但它们无法正确单击。我已将问题简化为以下示例:https://codesandbox.io/s/amazing-currying-s5vn0

如果有人知道我可能做错了什么，或者两个系统中存在错误，请告诉我。单击上例中的按钮时，它们不会保持单击状态。我有一个更复杂的 react 功能组件，它使用其他库组件，所以我不能将它包含在这里。它的行为略有不同:即使单击不同的按钮后，按钮仍保持单击状态。这可能是也可能不是同一个问题。提前致谢。

Answer 1

您需要在要呈现为 Formik 字段的 FormikRadioGroup 组件内呈现单选按钮。这样，您实际上可以将 Formik 管理的 props 传递给要使用的组件，并允许 RadioGroup 组件确保一次仅单击一个按钮。我添加了一个 options 属性来提供一种传递单选选项数组的方法，并删除了您在该组件外部渲染的所有元素:

const FormikRadioGroup = ({
  field,
  form: { touched, errors },
  name,
  options,
  ...props
}) => {

  return (
    <React.Fragment>
      <RadioGroup {...field} {...props} name={name}>
        {options.map(option => (
          <FormControlLabel value={option} control={<Radio />} label={option} />
        ))}
      </RadioGroup>

      {touched[fieldName] && errors[fieldName] && (
        <React.Fragment>{errors[fieldName]}</React.Fragment>
      )}
    </React.Fragment>
  );
};

fork here .

编辑:使用渲染函数作为 Field 组件中的子组件的替代示例更新了沙箱。