如何在Formik的onChange上设置MUI Select中的值

Question

在将Formik与MUI的Select组件集成时，我遇到了一些挑战，首先，它没有更改onChange事件上的值，也没有显示任何错误消息，如果我没有选择任何内容，那么我终于找到了解决方案，并在下面分享了答案

Answer 1

在这里，我使用formik.setFieldValue直接设置值，并像往常一样将值传递给，同时显示我使用了来自MUI 的FormHelperText的错误消息

const formik = useFormik({
initialValues: {
user: '',
},
validationSchema: validationSchema,
onSubmit: (values) => {
alert(JSON.stringify(values, null, 2));
},
});
------------

<FormControl
fullWidth
size="small"
id="userType"
error={formik.touched.userType && Boolean(formik.errors.userType)}
>
<InputLabel id="user-type">User Type</InputLabel>
<Select
id="userType"
label="User Type"
name="userType"
value={formik.values.userType}
onBlur={formik.handleBlur}
onChange={(e) => formik.setFieldValue('userType', e.target.value as string)}
error={formik.touched.userType && Boolean(formik.errors.userType)}
>
<MenuItem value={'admin'}>Student</MenuItem>
<MenuItem value={'superAdmin'}>Recruiter</MenuItem>
</Select>
{formik.touched.password && (
<FormHelperText sx={{ color: 'error.main' }}>{formik.errors.userType}</FormHelperText>
)}
</FormControl>