使用 formik 字段控制单选按钮警告处理它的值

Question

我创建了单选按钮，它的值由 Formik 字段处理。这样我就可以在提交时使用其他 formik 字段输入值访问选定的单选按钮值，并且我可以简单地重用单选按钮功能。

单选按钮有效。单击提交按钮时，我可以获得其他输入值的值。但是我在下面收到一条警告消息。

Warning: Material-UI: A component is changing a controlled RadioGroup to be uncontrolled.
Input elements should not switch from uncontrolled to controlled (or vice versa).
Decide between using a controlled or uncontrolled RadioGroup element for the lifetime of the component.
    in RadioGroup (created by RadioButtonGroup)
    in RadioButtonGroup (created by FieldInner)
    in FieldInner (created by Context.Consumer)
    in Context.Consumer (created by FormikConnect(FieldInner))
    in FormikConnect(FieldInner) (created by BankAccountOptions)
    in BankAccountOptions (created by EditUserForm)
    in EditUserForm (created by Formik)
    in Formik (created by DeleteUserFormBox)
...

我认为我需要找到一种方法来处理 'checked' prop 并确保它具有 true ||假布尔值。我试图在 RadioButtonGroup 组件中使用 'setFieldValue' onChange 手动控制道具。但我只能从那里访问值。

Please Click here to see my code sample.

单击 indexPage 中的 'radio button' link 将带您进入示例页面。您可以在用户和共享文件夹中找到相关代码。

谢谢！！

Answer 1

我将“value”属性添加到“RadioGroup”，错误消息现在消失了。

const RadioButtonGroup = ({
  field: { onChange, name, value, ...rest },
  form: { errors, touched, setFieldValue },
  ...props
}) => {
  const errorMessage = getIn(errors, name);
  const isTouched = getIn(touched, name);

  const change = (e, name, shouldValidate) => {
    e.persist();
    const inputValue = e.target.value;
    return setFieldValue(name, inputValue, shouldValidate);
  };

  return (
    <React.Fragment>
      <RadioGroup
        id="radioGroup"
        value={value || ''}
        onChange={e => change(e, name, true)}
        {...rest}
        {...props}
        row
      />
      <p style={styles}>{isTouched && errorMessage}</p>
    </React.Fragment>
  );
};

export default RadioButtonGroup;

```

使用 formik 字段控制单选按钮警告处理它的值

controlled radio button warning handling it's value with formik field

radio-button

reactjs

material-ui

formik