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

Posted 2023-02-22

【中文标题】无法让 Material UI 单选按钮与 Formik 一起使用

【英文标题】：Cannot get Material UI radio buttons to work with Formik

【发布时间】：2020-02-15 18:47:00

【问题描述】：

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

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

【参考方案1】：

您需要将FormikRadioGroup 组件内的单选按钮呈现为Formik 字段。这样，您实际上可以将 Formik 管理的道具传递给要使用的组件，并允许 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>
  );
;

分叉here。

编辑：更新了沙箱，使用了一个替代示例，在 Field 组件中使用渲染函数作为子项。

【讨论】：

谢谢！这解决了我描述的问题。不幸的是，让单选按钮在我的组件上工作仍然存在问题，我无法在此处发布更多依赖项。我也在那里尝试过你的方法，但没有成功。如果我可以在代码沙箱中复制它，我会进行更多调查，并且可能会创建一个新问题。

【参考方案2】：

import  FormControlLabel, Radio, LinearProgress  from '@material-ui/core';
import  Formik, Field  from 'formik';
import  RadioGroup  from 'formik-material-ui';

<Formik ...otherProps>
  ( isSubmitting ) => (
    <Field component=RadioGroup name="activity">
      <FormControlLabel
        value="painting"
        control=<Radio disabled=isSubmitting />
        label="Painting"
        disabled=isSubmitting
      />
      <FormControlLabel
        value="drawing"
        control=<Radio disabled=isSubmitting />
        label="Drawing"
        disabled=isSubmitting
      />
      <FormControlLabel
        value="none"
        control=<Radio disabled=isSubmitting />
        label="None"
        disabled
      />
    </Field>
  )
</Formik>;

现在已记录在案！使用来自formik-material-ui 的RadioGroup。

https://stackworx.github.io/formik-material-ui/docs/api/material-ui/

【讨论】：

请解释你的答案