如何從反應掛鈎返回父組件的回調？ 比如返回上傳的 url 列表

Question

如何從反應掛鈎返回父組件的回調？ 比如返回上傳的 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;

Answer 1

您的父母應該將存儲接受文件列表的 state 的設置器作為道具傳遞（我想是一個數組）

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;