Reactjs 如何在dragger标记中使用onChange属性？

我使用

实现了文件上传功能
但我想尝试拖放功能，所以我引入了ant设计
在input标记中，我使用了onChange to setState，但我不知道如何使用dragger标记。

下面是使用输入标记的源代码

  onFileChange = (e) => {
        this.setState({
            thumbnail: e.target.files[0]
        });
    }

.
.
.

  <Input type="file" namge="thumbnail" size="large" placeholder="Thumbnail" onChange={this.onFileChange}></Input>

onFileChange=（e）=>{
这是我的国家({
缩略图：e.target.files[0]
});
}
.
.
.

这是蚂蚁设计的牵引器

const { Dragger } = Upload;

const props = {
    name: 'file',
    multiple: true,
    action: 'https://www.mocky.io/v2/5cc8019d300000980a055e76',
    onChange(info) {
      const { status } = info.file;
      if (status !== 'uploading') {
        console.log(info.file, info.fileList);
      }
      if (status === 'done') {
        message.success(`${info.file.name} file uploaded successfully.`);
      } else if (status === 'error') {
        message.error(`${info.file.name} file upload failed.`);
      }
    },
  };

.
.
.
<Dragger {...props}>
   <p> ... </p>
</Dragger>

const{Dragger}=Upload；
常量道具={
名称：'文件'，
多重：对，
行动：'https://www.mocky.io/v2/5cc8019d300000980a055e76',
onChange（信息）{
const{status}=info.file；
如果（状态！=“正在上载”）{
log（info.file，info.fileList）；
}
如果（状态==“完成”）{
message.success（`${info.file.name}文件已成功上载。`）；
}否则如果（状态=='error'）{
message.error（`${info.file.name}文件上载失败。`）；
}
},
};
.
.
.

用这样的道具将“onchange”连接到牵引机上可以吗

<Dragger {...props} onChange={this.onFileChange}>
   <p> ... </p>
</Dragger>

---

非常感谢您的帮助。

是的，如果您尚未在其道具中使用，可以在

Dragger

上使用

onChange

。在给定的示例中，您要传递给

Dragger

的

props

对象中已经有

onChange

属性，因此您不应该使用另一个onChange属性，而是可以在

props

对象的

onChange

属性中编写逻辑

const { Dragger } = Upload;

const props = {
    name: 'file',
    multiple: true,
    action: 'https://www.mocky.io/v2/5cc8019d300000980a055e76',
    //Here is onChange function written and you can use this to perform your action
    onChange(info) {
      const { status } = info.file;
      if (status !== 'uploading') {
        console.log(info.file, info.fileList);
      }
      if (status === 'done') {
        message.success(`${info.file.name} file uploaded successfully.`);
      } else if (status === 'error') {
        message.error(`${info.file.name} file upload failed.`);
      }
    },
  };

.
.
.
<Dragger {...props}>
   <p> ... </p>
</Dragger>

const{Dragger}=Upload；
常量道具={
名称：'文件'，
多重：对，
行动：'https://www.mocky.io/v2/5cc8019d300000980a055e76',
//下面是编写的onChange函数，您可以使用它执行操作
onChange（信息）{
const{status}=info.file；
如果（状态！=“正在上载”）{
log（info.file，info.fileList）；
}
如果（状态==“完成”）{
message.success（`${info.file.name}文件已成功上载。`）；
}否则如果（状态=='error'）{
message.error（`${info.file.name}文件上载失败。`）；
}
},
};
.
.
.