Question

我试图在Formik中使用“材质UI”单选按钮，但单击不正确。我已将问题简化为以下示例：https://codesandbox.io/s/amazing-currying-s5vn0

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

Answer 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。

Answer 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>;

现在有记录了！使用 RadioGroup 中的 formik-material-ui。

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

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

2 个答案: