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

Question

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

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

第二个是上传组件：

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 中添加了一些 props，例如

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

我希望在福米克中获取一系列上传的文件。相反，我得到文件的初始值(空数组(。 如何获取这些文件并将它们传递到formik表单byreact-dropzone中？

Answer 1

你应该将 Formik propssetFieldValue传递给UploadComponent并使用它来设置返回值UploadComponent

福米克形式：

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>

上传组件：

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

示例代码和框，希望对您有所帮助