显示模态弹出窗口后，蚂蚁设计拖放上传

Question

我正在为ant设计文件添加我的反应打字稿项目，拖放上传和模态。 当我立即拖放或上传文件并且仅在屏幕上显示模态弹出窗口时，我尝试这样做(不想显示上传的文件只是显示模态(，我设置了代码，但它不起作用，任何人都知道如何正确执行此操作

谢谢

在这里堆叠闪电战

代码部分在这里

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>



);
}
}

Answer 1

我得到了解决方案

我将此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
},
};