Как я могу вернуть обратный вызов из ответных перехватов родительского компонента? как возвращение списка загруженных URL

Question

Как вернуть обратный вызов из ответных хуков обратно родительскому компоненту? например, возвращает список загруженных URL.

дочерние компоненты / hook

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;

Answer 1

Ваш родитель должен передать как установщик состояния, в котором хранится список принятых файлов (я полагаю, это массив)

const Parent = () =>{
const [fileUploaded, setFileUploaded] = useState([])

return <><ImageUploader setFileUploaded={setFileUploaded} /></>
}

Затем внутри ImageUploader

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;