受控单选按钮警告处理其值与 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)
...

我认为我需要找到一种方法来处理"检查"道具并确保它具有真||假布尔值。 我尝试在RadioButtonGroup组件中使用"setFieldValue"手动控制道具。但我只能从那里获得价值。

请单击此处查看我的代码示例。

单击索引页面中的"单选按钮"链接将引导您进入示例页面。您可以在用户和共享文件夹中找到相关代码。

谢谢！！

Answer 1

我向">无线电组"添加了">值"道具，错误消息现在消失了。

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