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) => {
    ...
  }}
  />
}