0

所以我尝试向我的 React + Redux 应用程序添加一个非常简单的文件上传,我发现 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 个日志输出。第一个是我删除的文件,第二个 - 某种代理,可能由 react 本身提供......

控制台输出示例

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

我试过的东西

我试图消除几个明显的问题点,但似乎没有做出任何改变。

  1. 将函数重命名为onChange其他类似的handleDrop名称并将其重写为handleDrop = (files) => {
  2. 删除构造函数(为自己分配一些东西似乎很奇怪)
4

1 回答 1

0

它最终成为一件简单的事情,我不去想它真的很愚蠢。

上面代码中的onChangeprop 传递到Dropzone输入字段,然后传递到输入字段,这就是混乱的根源。

我修改了代码以使其像这样工作:

render() {

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

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

这很好用

于 2018-02-04T19:07:54.763 回答