有谁知道如何实现 useDropzone 钩子而不是 <Dropzone />(组件)以及 react-final-form

Question

例如如果我有

const ImageInput = ({fieldPropsFromFinalForm}) => {
const { getRootProps, getInputProps, open } = useDropzone({ onDrop, accept: 'image/jpeg, image/png' });
.
.
.
return (<input {...getInputProps()} {...fieldPropsFromFinalForm} /> )
} 

这种方式的输入效果并不明显，但我不知道如何让它发挥作用——如何一起处理它们。我是新手，我希望我没有问错问题。

Answer 1

您必须在onDrop回调中调用fieldPropsFromFinalForm的onChange

请找到这个沙盒，例如

请查找<ImageInput/>组件的代码

图像输入

const ImageInput = props => {
const onDrop = useCallback(acceptedFiles => {
// Do something with the files
props.input.onChange(acceptedFiles);
}, []);
const { getRootProps, getInputProps, isDragActive } = useDropzone({
onDrop,
accept: "image/jpeg, image/png"
});
return (
<div {...getRootProps()}>
<input {...getInputProps()} {...props} />
{isDragActive ? (
<p>Drop the files here ...</p>
) : (
<p>Drag 'n' drop some files here, or click to select files</p>
)}
{props.input.value
? props.input.value.map(file => {
return <div>{file.path}</div>;
})
: null}
</div>
);
};

样本表格

function SampleForm() {
const onSubmit = values => {
alert(JSON.stringify(values));
};
return (
<div>
<Form onSubmit={onSubmit}>
{props => (
<form onSubmit={props.handleSubmit}>
<Field name="myField">
{props => (
<div>
<ImageInput {...props} />
</div>
)}
</Field>
<button type="submit">Submit</button>
</form>
)}
</Form>
</div>
);
}