react备忘
本文最后更新于:2 小时前
Upload 前弹Modal确认窗
Upload
组件点击就会调用系统弹窗选择文件上传,如果把弹窗控制变量绑定到 Upload
组件,会出现 Modal
和系统弹窗重叠。
正确的逻辑应该是点击 Upload
组件 -> Moda
提示框 -> 确认 -> 弹出系统弹窗选择需上传的文件
用 Button
伪装成 Upload
组件,Upload
组件设置隐藏显示,点击 Button
后弹 Modal
窗,点击 Modal
的确认后模拟点击 Upload
import { Component } from "react";
import {
...
} from "...";
class UploadModal extends Component {
formApi: any;
state = {
columns: [
{
...
},
{
title: "操作",
dataIndex: "operate",
width: 150,
render: (text: any, row: any) => {
const { isUploading } = this.state;
const uploadUrl = `${baseConfig.BASE_URL}/.../...`;
return (
<>
<div>
<Button
icon={<IconUpload />}
loading={isUploading}
onClick={() => {
setTimeout(() => {
this.setState((state, props) => ({
formData : {
...
},
updateModalVisiable: true
}))
})
}}
>
上传
</Button>
</div>
</>
);
}
}
],
isUploading: false,
};
async componentDidMount() {
...
}
// 上传
onUploadClick = async ({ file }: customRequestArgs) => {
this.setState({ isUploading: true });
const { .. } = this.state.formData;
const formData = new FormData();
...
this.setState({ isUploading: false });
if (res.code === 200) {
Toast.success("上传成功!");
} else {
Toast.error("上传失败:" + res.msg);
}
};
// 模拟点击
/**
* 上传按钮display: none,点击前需要先弹出提示框
* 单独设置一个按钮,点击弹出模态框
* 点击确认模拟点击display: none的上传按钮,弹出上传内容选择框
*/
simulateClickUploadBtn = () => {
// console.log("click upload button");
this.setState((state, props) => ({
updateModalVisiable: false
}))
let btn = document.getElementById("updateBtn")
if ( btn ) {
btn?.click()
}
// console.log("btn -> ", btn);
// console.log(this.state.formData);
}
render() {
const { ... } =
this.state;
const { Select, AutoComplete } = Form;
const uploadUrl = `${baseConfig.BASE_URL}/.../...`;
return (
<div className="zc-page">
<Upload
action={uploadUrl}
accept=".xlsx"
className="!mr-12px"
showUploadList={false}
customRequest={this.onUploadClick}
>
<Button id="uploadBtn" style={{display: "none"}} />
</Upload>
<Modal
title="是否确认..."
visible={this.state.updateModalVisiable}
style={{width: 500}}
onOk={this.simulateClickUploadBtn}
onCancel={() => {
this.setState((state, props) => ({
updateModalVisiable: false
}))
}}
>
若..,则...
</Modal>
</div>
);
}
}
export default UploadModal;
带时间选择的 DatePicker 设置disabled
Select Option / DatePicker 弹出层不跟随父节点滚动

设置 getPopupContainer
属性,返回的是需要挂在到的滚动个的 DOM
<DatePicker
type="dateTime"
needConfirm={true}
defaultValue={...}
// datePicker 跟着滚动
getPopupContainer={() => document.getElementsByClassName("滚动的父节点")[0]}
disabledDate={...}
disabledTime={...}
onChange={(e) => {
...
}}
onConfirm={(e) => {
...
}}
/>
}
本博客所有文章除特别声明外,均采用 CC BY-SA 4.0 协议 ,转载请注明出处!