如何解决Formik不会改变图像URL的变化
我有一个名为 Category.js 的组件。该组件用作添加类别和更新类别。这是更新类别的图片。
现在保存更改按钮已禁用。没关系，因为我什么都没做。如果我更改名称或描述按钮，请启用。但是当我更改图像时，它不会启用我。图像的值绑定到名为activeImage的变量，我也更改了Formik之外的变量的值。
这是我的组件代码。
<CardContent>
<Formik
enableReinitialize
initialValues={initialValues}
onSubmit={confirm}
validationSchema={validationSchema}
>
{({ errors,dirty,handleReset,touched,handleChange,values,handleBlur,isValid }) => {
return (
<Form>
<Grid container spacing={2}>
<Grid item md={12}>
{isUpdate ? (
<Typography variant="h5">{t('Update category')}</Typography>
) : (
<Typography variant="h5">{t('Add category')}</Typography>
)}
</Grid>
<Grid item md={12}>
<TextField
label={t('Item category name')}
variant="outlined"
fullWidth
name="itemName"
value={values.itemName}
onChange={handleChange}
onBlur={handleBlur}
error={Boolean(errors.itemName)}
required
helperText={errors.itemName && touched.itemName && errors.itemName}
/>
</Grid>
<Grid item md={12}>
<TextField
label={t('Item Category Description')}
variant="outlined"
fullWidth
name="description"
value={values.description}
onChange={handleChange}
onBlur={handleBlur}
error={Boolean(errors.description)}
helperText={
errors.description && touched.description && errors.description
}
/>
</Grid>
<Grid item md={12}>
<label htmlFor="upload-photo">
<input
style={{ display: 'none' }}
id="upload-photo"
type="file"
onChange={handleImageAsFile}
/>
<Button
color="secondary"
variant="contained"
component="span"
size="small"
className={classes.margin}
>
{t('Upload Image')}
</Button>
</label>
</Grid>
{initialValues.activeImage && (
<Grid item md={12}>
<img
width="200px"
src={initialValues.activeImage}
alt="Category image"
/>
<Button
variant="contained"
mt={3}
className={classes.margin}
onClick={() => deleteImage()}
>
delete image
</Button>
</Grid>
)}
<Grid item md={12}>
{isImageUploading ? (
'Please wait image is uploading...'
) : (
<div className={classes.buttonMargin}>
{isUpdate ? (
<Button
color="secondary"
variant="contained"
disabled={!dirty || !isValid}
type="submit"
className={classes.white}
>
save changes
</Button>
) : (
<Button
color="secondary"
variant="contained"
disabled={!dirty || !isValid}
type="submit"
className={classes.white}
>
{t('Save')}
</Button>
)}
<Button variant="outlined" onClick={() => handleReset()}>
{t('Clear')}
</Button>
</div>
)}
</Grid>
<Grid item md={12} className={classes.grow}>
{isAlert && (
<Alert variant="filled" severity={alertType}>
{alertMessage}
</Alert>
)}
</Grid>
</Grid>
</Form>
);
}}
</Formik>
这是我传递给表格的状态
const [initialValues,setInitialValues] = useState({
itemName: '',activeImage: '',description: ''
});
但是activeImage在formik内的任何地方都没有提及。我在formik之外更改它。我认为，即使我通过了activeImage的验证，Yup验证模式，formik也无法识别activeImage的值。
const validationSchema = Yup.object().shape({
itemName: Yup.string().required('Required').max(15,'Maximum length for the name is 15'),activeImage: Yup.string().max(255,'Maximum length for the name is 255').nullable(true),description: Yup.string().max(30,'Maximum length for the name is 30')
});
我该如何解决？
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。