我正在尝试在 Formik 中使用 Material UI 单选按钮，但它们没有正确点击。我已将问题简化为以下示例：https : //codesandbox.io/s/amazing-currying-s5vn0
如果有人知道我可能做错了什么，或者任一系统中存在错误，请告诉我。单击上面示例中的按钮时，它们不会保持单击状态。我有一个使用其他库组件的更复杂的react功能组件，所以我不能在这里包含它。它的行为略有不同：即使在单击不同的按钮后，按钮仍会保持单击状态。这可能是也可能不是同一个问题。提前致谢。
您需要在要FormikRadioGroup呈现为 Formik 字段的组件内呈现单选按钮。这样，您实际上可以将 Formik 管理的 props 传递给要使用的组件，并允许RadioGroup组件确保一次只单击一个按钮。我添加了一个optionsprops来提供一种传递无线电选项数组的方法，并删除了您在该组件之外渲染的所有元素：
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>
);
};
叉在这里。
编辑：使用渲染函数作为 Field 组件中的子项使用替代示例更新了沙箱。
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/