所以我尝试向我的 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 本身提供......
我想知道如何摆脱那个代理,为什么它首先要这样做?
我试过的东西
我试图消除几个明显的问题点,但似乎没有做出任何改变。
- 将函数重命名为
onChange
其他类似的handleDrop
名称并将其重写为handleDrop = (files) => {
- 删除构造函数(为自己分配一些东西似乎很奇怪)