reactjs - 有谁知道如何实现 useDropzone 钩子而不是（组件）连同 react-final-form

Question

例如，如果我有

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

} 

这种方式输入并不明显，但我不知道如何使它工作如何一起处理它们。我是新手，我希望我没有问错问题。

标签： reactjsdropzonereact-final-form

Answer 1

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

例如，请找到这个沙箱

请找到<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>
  );
}