[antd] Upload返回结果如何与List Item绑定？

Question

[antd] Upload返回结果如何与List Item绑定？

travonf

11149

发布于
2018-10-30

问题描述

我将List与Upload结合使用，根据Upload结果控制List的Avatar的显示，现在遇到个问题，任何一个Upload都会更新全部的Avatar状态，有人能给看看吗？

问题出现的环境背景及自己尝试过哪些方法

现在不知道如何将List.Item.Id与Upload做绑定

相关代码

// 请把代码文本粘贴到下方（请勿用图片代替代码）
https://codesandbox.io/s/o94m...

import React, { Component } from "react";
import "antd/dist/antd.css";
import "./index.css";
import { Upload, message, Button, Icon, Avatar, List } from "antd";

const data = [
  "Racing car sprays burning fuel into crowd.",
  "Japanese princess to wed commoner.",
  "Australian walks 100km after outback crash.",
  "Man charged over missing wedding girl.",
  "Los Angeles battles huge wildfires."
];

class CustomUpload extends Component {
  constructor(props) {
    super(props);
    this.handleUploadStatus = this.handleUploadStatus.bind(this);
    this.state = { avatar_bg_c: "gray", avatar_icon: "question" };
    this.uploaderProps = {
      name: "file",
      action: "//jsonplaceholder.typicode.com/posts/",
      headers: {
        authorization: "authorization-text"
      },
      onChange: info => {
        if (info.file.status !== "uploading") {
          console.log(info.file, info.fileList);
        }
        if (info.file.status === "done") {
          message.success(`${info.file.name} file uploaded successfully`);
          this.handleUploadStatus(info.file.status);
        } else if (info.file.status === "error") {
          message.error(`${info.file.name} file upload failed.`);
          this.handleUploadStatus(info.file.status);
        }
      }
    };
  }

  handleUploadStatus(uploadStatus) {
    switch (uploadStatus) {
      case "done":
        this.setState({ avatar_bg_c: "green", avatar_icon: "check" });
        break;
      case "error":
        this.setState({ avatar_bg_c: "red", avatar_icon: "close" });
        break;
      default:
        this.setState({ avatar_bg_c: "yellow", avatar_icon: "question" });
    }
  }

  render() {
    const { avatar_bg_c, avatar_icon } = this.state;
    return (
      <div>
        <h3 style={{ marginBottom: 16 }}>Default Size</h3>
        <div>
          上传结果：{avatar_bg_c}, {avatar_icon}
        </div>
        <List
          header={<div>Header</div>}
          footer={<div>Footer</div>}
          bordered
          dataSource={data}
          renderItem={item => (
            <List.Item
              actions={[
                <Upload {...this.uploaderProps}>
                  <Button>
                    <Icon type="upload" /> Upload
                  </Button>
                </Upload>
              ]}
            >
              <List.Item.Meta
                avatar={
                  <Avatar
                    shape="circle"
                    style={{ backgroundColor: avatar_bg_c }}
                    icon={avatar_icon}
                  />
                }
                title={avatar_bg_c}
                description={avatar_icon}
              />
              <div>
                {avatar_bg_c}, {avatar_icon}
              </div>
              {/* {item} */}
            </List.Item>
          )}
        />
      </div>
    );
  }
}

// ReactDOM.render(<CustomUpload />, document.getElementById("container"));
export default CustomUpload;