Невозможно настроить радио-кнопки Material UI для работы с Formik

Question

Я пытаюсь использовать радио-кнопки Material UI с Formik, и они не нажимают правильно. Я свел проблему к следующему примеру: https://codesandbox.io/s/amazing-currying-s5vn0

Если кто-нибудь знает, что я могу делать неправильно, или если в какой-либо системе есть ошибка, пожалуйста, дайте мне знать. При нажатии на кнопки в приведенном выше примере они не остаются нажатыми. У меня есть более сложный реагирующий функциональный компонент, который использует другие библиотечные компоненты, поэтому я не могу включить его сюда. Он ведет себя немного по-другому: кнопки остаются нажатыми даже после нажатия другой кнопки. Это может или не может быть той же проблемой. Заранее спасибо.

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>
  );
};

Fork здесь .