通过react-dropzone和formik在react中上传文件

Question

我有两个组件，第一个是Formik form：

<Formik
  initialValues={{files: []}}
  onSubmit={values => {
  console.log(values)}}>
    {props => (
      <form onSubmit={props.handleSubmit}>
        <UploadComponent/>
        <button type="submit"></button>
      </form>
    )}
</Formik>

第二个是UploadComponent：

const UploadComponent = () => {
  const [files, setFiles] = useState([]);
  const {getRootProps, getInputProps, isDragActive} = useDropzone({
    accept: 'image/*',
    onDrop: acceptedFiles => {
      setFiles(acceptedFiles.map(file => Object.assign(file, {
        preview: URL.createObjectURL(file)
      })))
    }
  })
  return (
    <div>
      <div {...getRootProps({className: 'dropzone'})}>
        <input {...getInputProps()} />
        <p>Drag and drop some files here, or click to select files</p>
      </div>
   </div>
  )

我想将这些文件作为值传递给Formik，我在UploadComponent中添加了一些属性，比如

value={props.values.files}
onChange={props.handleChange}
onBlur={props.handleBlur}
name='files'

我希望在formik中得到一个上传的文件数组。相反，我得到的是文件的初始值(空数组)。如何通过byreact dropzone获取这些文件并将其传递到formik形式？

Answer 1

您应该将Formik props setFieldValue向下传递给UploadComponent，并使用它来设置UploadComponent的返回值

Formik表单：

 render={({ values, handleSubmit, setFieldValue }) => {
            return (
              <form onSubmit={handleSubmit}>
                <div className="form-group">
                  <label htmlFor="file">Multiple files upload</label>

                  <UploadComponent setFieldValue={setFieldValue} />//here


                   // list of uploaded files  
                  {values.files &&
                    values.files.map((file, i) => (
                      <li key={i}>
                        {`File:${file.name} Type:${file.type} Size:${
                          file.size
                        } bytes`}{" "}
                      </li>
                    ))}
                </div>
                <button type="submit" className="btn btn-primary">
                  submit
                </button>
              </form>

UploadComponent：

 const UploadComponent = props => {
  const { setFieldValue } = props;
  const { getRootProps, getInputProps, isDragActive } = useDropzone({
    accept: "image/*",
    onDrop: acceptedFiles => {
      setFieldValue("files", acceptedFiles);
    }
  });
  return (
            .
            .
            .

sample codesansbox，希望能对您有所帮助