在 React Dropzone 组件上访问 'name' 属性

Question

我希望使用 React Dropzone 在同一个组件中创建多个 dropzones，我想以不同方式处理来自每个 dropzone 的文件。这将是具有许多不同的拖放区的表单的一部分，每个拖放区都有不同的参数。首先，我试图将一些识别信息从特定的 dropzone 传递到 useDropzone 挂钩，以便我最终可以使用不同的函数来处理每个 dropzone。

如何访问通过 getRootProps 函数传递的名称属性以便我可以处理每个掉落，或者是否有更好的方法来完全完成此操作？在下面的代码中，我能够将事件打印到控制台，但我无法在事件对象的任何位置找到 "testtesttest" 作为值。我来自 getRootProps 和 getInputProps 的道具覆盖了我包含的名称道具，即使我也通过 getInputProps 函数放置它。

import React, {useState, useEffect} from 'react';
import {useDropzone} from 'react-dropzone'
import styled from 'styled-components';

const MasterDropzone = styled.div`
    height: 150px;
    width: 80%;
    border: 3px dashed black;
`

function UploadMedia(){

    const [masterFile, setMasterFile] = useState({
        file: null,
        preview: null
    });

    const {
        getRootProps,
        getInputProps,
    } = useDropzone({
        accept: '.jpeg,.png',
        noClick: false,
        noKeyboard: true,
        onDrop: (acceptedFiles,rejected,event) => {
            console.log(event)
            setMasterFile({
                ...masterFile,
                file: acceptedFiles[0]
            })
        }
    });

    useEffect(
        () => {
            if(!masterFile.file){
                setMasterFile({
                    ...masterFile,
                    preview: undefined
                })
                return
            }
            const objectUrl = URL.createObjectURL(masterFile.file)
            setMasterFile({
                ...masterFile,
                preview: objectUrl
            })
            return () => URL.revokeObjectURL(objectUrl)
        },
        [masterFile.file]
    );
    return (
        <div>
          <h1>Upload Media</h1>
          {
          masterFile.preview 
          ? 
          <img width='300px' height='300px' src={masterFile.preview} />
          : 
          <MasterDropzone name='testtesttest' {...getRootProps({name: 'testtesttest'})}>
          <p>Drag file here or click to upload</p>
          <input name='testtesttest'{...getInputProps({name: 'testtesttest'})} />
          </MasterDropzone>
          }
         </div>
    )
}

export default UploadMedia

Answer 1

最终通过制作一个 Dropzone 组件并根据 Alvaro 的建议用道具改变我需要的每个 dropzone 来解决这个问题。这是我所做的

UploadMedia.js

import Dropzone from './Dropzone'

function UploadMedia({ title }){

    const [masterFile, setMasterFile] = useState({
        content: null,
        preview: null
    });
    const [subtitleFile, setSubtitleFile] = useState({
        content: null,
        preview: null
    })

    const [posterImage, setPosterImage] = useState({
        content: null,
        preview: null
    })

    const [coverImage, setCoverImage] = useState({
        content: null,
        preview: null
    })

    const [featureImage, setFeatureImage] = useState({
        content: null,
        preview: null
    })

    const masterText = <p>Master Video File</p>

    const subtitleText = <p>Subtitle File</p>

    const posterText = <p>Poster Image</p>

    const coverText = <p>Cover Photo</p>

    const featureText = <p>Feature Photo</p>

    async function handleSubmit(evt) {
        evt.preventDefault()
        console.log('handle files here')
    }

    return (
        <Container>
            <h1>Upload media for {title.titleName}</h1>
            <Form onSubmit={handleSubmit}>
            <Dropzone file={masterFile} setFile={setMasterFile} text={masterText} height='200px' width='70%'/>
            <Dropzone file={subtitleFile} setFile={setSubtitleFile} text={subtitleText} height='100px' width='70%'/>
            <Dropzone file={posterImage} setFile={setPosterImage} text={posterText} height='200px' width='100px'/>
            <Dropzone file={coverImage} setFile={setCoverImage} text={coverText} height='150px' width='350px'/>
            <Dropzone file={featureImage} setFile={setFeatureImage} text={featureText} height='200px' width='400px'/>
            <button type="submit">Save And Upload</button>
            </Form>
        </Container>
    )
}

export default UploadMedia

Dropzone.js

function Dropzone({file, setFile, height, width, text}){

    const {
        getRootProps,
        getInputProps,
    } = useDropzone({
        acceptedFiles: '',
        noClick: false,
        noKeyboard: true,
        onDrop: (acceptedFiles) => {
            setFile({
                ...file,
                content: acceptedFiles[0]
            })
        }
    });

    useEffect(
        () => {
            if(!file.content){
                setFile({
                    ...file,
                    preview: undefined
                })
                return
            }
            const objectUrl = URL.createObjectURL(file.content)
            setFile({
                ...file,
                preview: objectUrl
            })
            // this line prevents memory leaks, but also removes reference to the image URL
            // google chrome will remove this automatically when current session ends

            // return () => URL.revokeObjectURL(objectUrl)
        },
        [file.content]
    );

    return (
        <Container height={height} width={width}>
        {
        file.preview 
        ? 
        <img width='40px' height='40px' src={file.preview} />
        : 
        <DropzoneContainer {...getRootProps()}>
        {text}
        <p>Drag file or click to upload file</p>
        <input {...getInputProps()} />
        </DropzoneContainer>
        }
        </Container>
    )
}

export default Dropzone

在 React Dropzone 组件上访问 'name' 属性

Access 'name' property on React Dropzone component

reactjs

react-dropzone

react-hooks