如何实现 useDropzone 钩子而不是 <Dropzone /> （组件）与 react-final-form

Posted 2023-05-08

【中文标题】如何实现 useDropzone 钩子而不是 <Dropzone /> （组件）与 react-final-form

【英文标题】：Does anyone know how to implement useDropzone hook and not <Dropzone /> (component) together with react-final-form有谁知道

【发布时间】：2020-06-02 16:21:49

【问题描述】：

例如 如果我有

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

 

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

【参考方案1】：

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

请以this沙箱为例

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