Блог

Я пытаюсь создать изображение, загруженное в мою форму. Проблема в том, что я пытаюсь изменить значение на фактический загруженный файл. Я пытаюсь использовать значение setFieldValue, но оно говорит, что оно не определено. Ниже приведен код. Есть идеи, почему он не определен? Я думал, что он поставляется с Формиком.

 import { Formik } from 'formik';


const AddProduct = (props) => {

  return (
    <Formik
      initialValues={{
        serviceImage: null
      }}
      
      onSubmit={(values) => {
        console.log(values);
        
      }}
    >
      {({
        errors,
        handleBlur,
        handleChange,
        handleSubmit,
        setFieldValue,
        isSubmitting,
        touched,
        values,
        formProps
      }) => (
        <form onSubmit={handleSubmit}>
          <TextField
            error={Boolean(touched.serviceName amp;amp; errors.serviceName)}
            fullWidth
            helperText={touched.serviceName amp;amp; errors.serviceName}
            label="Service name"
            margin="normal"
            name="serviceName"
            onBlur={handleBlur}
            onChange={handleChange}
            value={values.serviceName}
          />

          <Button>
            <input
              id="file"
              name="serviceImage"
              value={values.serviceImage}
              type="file"
              onChange={(event) => formProps.setFieldValue('serviceImage', event.target)
              }
            />
            Add an Image
          </Button>

            <Button
              type="submit"            >
              Post this service on the Events Platform
            </Button>
        </form>
        
      )}
    </Formik>
  );
};

 

Вы уже объявили setFieldValue в своей функции обратного вызова formik

Так что измените его на:

 <input
  id="file"
  name="serviceImage"
  value={values.serviceImage}
  type="file"
  onChange={event => setFieldValue('serviceImage', event.currentTarget.files[0])}
/>;