代码之家  ›  专栏  ›  技术社区  ›  core114

蚂蚁设计上传到dag文件后模态没有显示

  •  0
  • core114  · 技术社区  · 4 年前

    ant design file drag and drop upload modal . 我试着做的时候,我拖或上传文件的时刻,只是在屏幕上显示模式弹出(不想显示上传的文件,只是显示模式),我设置的代码,但它不工作,任何人都知道如何正确地做到这一点

    谢谢

    stack blitz here

    这里是代码部分

    import { Upload, message,Modal, Button  } from 'antd';
    import { InboxOutlined } from '@ant-design/icons';
    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.`);
        }
      },
    };
    interface AppProps { }
    interface AppState {
      name: string; 
    
    }
    
    class App extends Component<AppProps, AppState> {
      constructor(props) {
        super(props);
        this.state = {
          name: 'React',
         visible: false
        };
      }
    
      //modal
     
    
      showModal = (any) => {
        this.setState({
          visible: "true",
        });
      };
    
      handleOk = e => {
        console.log(e);
        this.setState({
          visible: false,
        });
      };
    
      handleCancel = e => {
        console.log(e);
        this.setState({
          visible: false,
        });
      };
    
    
        
    
      render() {
        return (
          <div>
           <Dragger {...props} onClick={this.showModal}> 
        <p className="ant-upload-drag-icon">
          <InboxOutlined />
        </p>
        <p className="ant-upload-text">Click or drag file to this area to upload</p>
        <p className="ant-upload-hint">
          Support for a single or bulk upload. Strictly prohibit from uploading company data or other
          band files
        </p>
      </Dragger>
    
    
    <div>
           
          
            <Modal
              title="Basic Modal"
              visible={this.state.visible}
              onOk={this.handleOk}
              onCancel={this.handleCancel}
            >
              <p>Some contents...</p>
              <p>Some contents...</p>
              <p>Some contents...</p>
            </Modal>
          </div>
    
    
          </div>
    
    
    
    
          
        );
      }
    }
    
    0 回复  |  直到 4 年前
        1
  •  0
  •   core114    4 年前

    我找到解决办法了

    onClick={this.showModal} onChange={this.showModal}

    把州放在这里

     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.`);
        }
      this.showModal
      },
    };