Javascript 如何从父组件返回回调？比如返回上传的url列表

如何从父组件返回回调？比如返回上传的url列表

子组件/挂钩

import React, { useCallback } from 'react';
import { useDropzone } from 'react-dropzone'

const ImageUploader = () => {
  const maxSize = 1048576;

  const onDrop = useCallback(async acceptedFiles => {
    console.log(acceptedFiles);

  }, []);

  const { isDragActive, getRootProps, getInputProps, isDragReject, acceptedFiles, rejectedFiles } = useDropzone({
    onDrop,
    accept: ['image/png', 'image/jpg'],
    minSize: 0,
    maxSize: 5242880,
    multiple: true
  });

  const isFileTooLarge = rejectedFiles.length > 0 && rejectedFiles[0].size > maxSize;

  return (
    <div className="container text-center mt-5">
      <div {...getRootProps()}>
        <input {...getInputProps()} />
        Click here or drop a file to upload!
      </div>
      <ul className="list-group mt-2">
        {acceptedFiles.length > 0 && acceptedFiles.map(acceptedFile => (
          <li className="list-group-item list-group-item-success">
            {acceptedFile.name}
          </li>
        ))}
      </ul>
    </div>
  );
};

export default ImageUploader;

import React，{useCallback}来自“React”；
从“react dropzone”导入{useDropzone}
常量图像上传器=（）=>{
常数maxSize=1048576；
const onDrop=useCallback（异步接受文件=>{
console.log（acceptedFiles）；
}, []);
const{isDragActive，getRootProps，getInputProps，isDragReject，acceptedFiles，rejectedFiles}=useDropzone({
昂德罗普，
接受：['image/png'，'image/jpg']，
minSize:0，
最大尺寸：5242880，
多重：对
});
常量isFileTooLarge=rejectedFiles.length>0&&rejectedFiles[0]。大小>最大大小；
返回(
单击此处或删除要上载的文件！

{acceptedFiles.length>0&&acceptedFiles.map（acceptedFile=>(

{acceptedFile.name}

))}

);
};
导出默认图像上传器；

您的父级应该将存储接受文件列表（我假设是一个数组）的状态的setter作为prop传递

const Parent=（）=>{
const[fileupload，setfileupload]=useState（[]）
回来
}

然后内置图像上传器

import React, { useCallback } from 'react';
import { useDropzone } from 'react-dropzone'

const ImageUploader = ({setFileUploaded}) => {
  const maxSize = 1048576;

  const onDrop = useCallback(async acceptedFiles => {
    setFileUploaded(acceptedFiles);
  }, []);

  const { isDragActive, getRootProps, getInputProps, isDragReject, acceptedFiles, rejectedFiles } = useDropzone({
    onDrop,
    accept: ['image/png', 'image/jpg'],
    minSize: 0,
    maxSize: 5242880,
    multiple: true
  });

  const isFileTooLarge = rejectedFiles.length > 0 && rejectedFiles[0].size > maxSize;

  return (
    <div className="container text-center mt-5">
      <div {...getRootProps()}>
        <input {...getInputProps()} />
        Click here or drop a file to upload!
      </div>
      <ul className="list-group mt-2">
        {acceptedFiles.length > 0 && acceptedFiles.map(acceptedFile => (
          <li className="list-group-item list-group-item-success">
            {acceptedFile.name}
          </li>
        ))}
      </ul>
    </div>
  );
};
export default ImageUploader;

import React，{useCallback}来自“React”；
从“react dropzone”导入{useDropzone}
常量ImageUploader=（{setFileUploader}）=>{
常数maxSize=1048576；
const onDrop=useCallback（异步接受文件=>{
setfileupload（acceptedFiles）；
}, []);
const{isDragActive，getRootProps，getInputProps，isDragReject，acceptedFiles，rejectedFiles}=useDropzone({
昂德罗普，
接受：['image/png'，'image/jpg']，
minSize:0，
最大尺寸：5242880，
多重：对
});
常量isFileTooLarge=rejectedFiles.length>0&&rejectedFiles[0]。大小>最大大小；
返回(
单击此处或删除要上载的文件！

{acceptedFiles.length>0&&acceptedFiles.map（acceptedFile=>(

{acceptedFile.name}

))}

);
};
导出默认图像上传器；

我想可能有点混乱

useCallback

hook记忆组件传递给其子组件的回调。如果

ImageUploader

需要将数据传递回其父级，则该父级需要将回调传递给

ImageUploader

，以便它使用数据进行调用。我没有看到任何道具被传递到

ImageUploader

，也没有任何关于全局状态的redux useDispatch（或类似）的指示。

import React, { useCallback } from 'react';
import { useDropzone } from 'react-dropzone'

const ImageUploader = ({setFileUploaded}) => {
  const maxSize = 1048576;

  const onDrop = useCallback(async acceptedFiles => {
    setFileUploaded(acceptedFiles);
  }, []);

  const { isDragActive, getRootProps, getInputProps, isDragReject, acceptedFiles, rejectedFiles } = useDropzone({
    onDrop,
    accept: ['image/png', 'image/jpg'],
    minSize: 0,
    maxSize: 5242880,
    multiple: true
  });

  const isFileTooLarge = rejectedFiles.length > 0 && rejectedFiles[0].size > maxSize;

  return (
    <div className="container text-center mt-5">
      <div {...getRootProps()}>
        <input {...getInputProps()} />
        Click here or drop a file to upload!
      </div>
      <ul className="list-group mt-2">
        {acceptedFiles.length > 0 && acceptedFiles.map(acceptedFile => (
          <li className="list-group-item list-group-item-success">
            {acceptedFile.name}
          </li>
        ))}
      </ul>
    </div>
  );
};
export default ImageUploader;