Saya menggunakan React Dropzone untuk mengunggah file ke server Node.js saya.

Ketika sebuah file dijatuhkan di dropzone, metode handleOnDrop() dipanggil. Kemudian metode uploadPicture() lain dipanggil.

...
handleOnDrop = (files) => {
    this.uploadPicture(files);
}

render() {
    const dropzone =
        <Dropzone onDrop={this.handleOnDrop}>
            {({ getRootProps, getInputProps }) => (
                <section className="container">
                    <div {...getRootProps({ className: 'dropzone' })}>
                        <input {...getInputProps()} />
                        <p>Drag 'n' drop some files here, or click to select files</p>
                    </div>
                </section>
            )}
        </Dropzone>
}

return (
    <div>
        <h1>Dropzone test</h1>
        {dropzone}
    </div>
}
...
  1. Saya terkejut dengan argumen file : itu diketahui oleh metode handleOnDrop() bahkan jika saya tidak meneruskannya di baris ini <Dropzone onDrop={this.handleOnDrop}>. Saya tidak mengerti di mana filediteruskan ke metode.

  2. Saya juga tidak mengerti peran getRootProps, getInputProps di dalam Dropzone. Mungkin itu terkait dengan pertanyaan di atas.

  3. Akhirnya, saya ingin memberikan id objek yang ingin saya perbarui gambarnya (<Dropzone> akan berada dalam array.map(item => ()) dan saya akan dapat mengakses item.id).

Saya mencoba kode yang tidak berfungsi ini dan banyak variannya, tetapi saya masih tidak dapat meneruskan item.id ke metode uploadPicture().


handleOnDrop = (id, files) => {
    this.uploadPicture(id, files);
}

<Dropzone onDrop={() => this.handleOnDrop(item.id)}>

Bantuan apa pun akan dihargai. Terima kasih.

0
Frankie 3 Juli 2020, 02:20

1 menjawab

Jawaban Terbaik

handleDrop Anda mengambil dua parameter tetapi Anda hanya meneruskan satu,

Anda dapat mencoba ini sebagai gantinya:

<Dropzone onDropAccepted={(files) => this.handleOnDrop(files,item.id)}>
1
Thanveer Shah 2 Juli 2020, 23:24