0

问题描述

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

clipboard.png

clipboard.png

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

现在不知道如何将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;

你期待的结果是什么?实际看到的错误信息又是什么?

我想要每一个Upload只会更新对应的Item状态

2018-10-30 提问
1 个回答
0

已采纳

你用一个状态如何控制多个,你这里需要每个一个状态才行

撰写答案

你可能感兴趣的

推广链接