如何在拖动标签中使用 onChange 属性？答案

【问题标题】：how to use onChange attribute in dragger tag?如何在拖动标签中使用 onChange 属性？
【发布时间】：2020-03-11 09:09:44
【问题描述】：

我使用<input type="file" .../>实现了文件上传功能。
但是我想尝试拖放功能，所以我导入了ant design。
在输入标签中，我使用了onChange来设置状态，但我不知道如何处理拖动标签。

以下是使用输入标签的源代码。

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

.
.
.

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

这是蚂蚁设计的 Dragger。

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>

这样的 props 可以将“onchange”附加到拖动器吗？

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

感谢您的帮助。

【问题讨论】：

标签： reactjs file antd dragger

【解决方案1】：

是的，如果你还没有在它的 props 中使用，可以在 Dragger 上使用 onChange。在给定的示例中，props 对象中已经有 onChange 属性，您正在传递给Dragger，因此您不应该使用另一个 onChange 属性，而是可以在 onChange 对象的 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>

【讨论】：