Question

所以我试图在我的React + Redux App上添加一个非常简单的文件上传，我发现Dropzone是最方便的方法。这是我的设置。

我有一个FileInput组件

import React from 'react'
import Dropzone from 'react-dropzone'

class FileInput extends React.Component {
    constructor(props) {
        super(props);
        this.onChange = this.onChange.bind(this);
    }

    onChange(files) {
        // For Redux form
        if (this.props.input) {
            const {input: {onChange}} = this.props;
            onChange(files[0])
        }
        else if(this.props.onChange){
            this.props.onChange(files[0])
        }
        else{
            console.warn('redux-form-dropzone => Forgot to pass onChange props ?');
        }
    }

    render() {
        return (
            <Dropzone onDrop={ this.onChange } {...this.props} >
                Drag&Drop the image <br/> or click to select one
            </Dropzone>
        )
    }
}
export default FileInput

我在这样的页面上使用它：

<FileInput
    onChange={(file) => console.log('dropped', file)}
    className='add-avatar-dropzone'
    activeClassName='dropzone-active'
/>

（用于调试目的的console.log）

但是当我尝试删除文件时，我得到2个日志输出。第一个是我删除的文件，第二个 - 某种代理，可能是由自己做出反应......

我想知道如何摆脱那个代理，为什么它首先要这样做呢？

我试过了

我试图消除一些明显的问题点，但似乎没有做任何改变。

将onChange函数重命名为handleDrop之类的其他内容并将其重写为handleDrop = (files) => {
删除构造函数（为自己分配内容似乎很奇怪）

Answer 1

它最终只是一件简单的事情，对我来说真的很愚蠢。

上面代码中的onChange道具传递给Dropzone，然后传递到输入字段，这是混乱的根源。

我将代码修改为这样：

render() {

    const { onChange, ...rest } = this.props

    return (
        <Dropzone onDrop={ this.onChange } {...rest} >
            Drag&Drop the image <br/> or click to select one
        </Dropzone>
    )
}

这很好用

react-dropzone onDrop两次射击

1 个答案: