Question

我正在使用ant-design的Dragger组件进行拖动和拖动功能，但是，如果我单击浏览文件夹并选择了可以使用的文件，则该按钮不起作用，但是如果我拖动了该文件，则该按钮不起作用

这是我的实现方式

import { Button, Icon, Input, message, Modal, Radio, TreeSelect, Typography, Upload } from 'antd';
const { Dragger } = Upload;

在这里组装组件：

   getFileUploader() {
        return (
            <Dragger
                name='file'
                multiple={false}
                accept=".docx"
                beforeUpload={(e, l) => this.beforeUpload(e, l)}
            >
                <p className="ant-upload-drag-icon">
                    <Icon type="inbox" />
                </p>
                <p className="ant-upload-text">Arraste e solte ou clique aqui para selecionar o arquivo da Estrutura <b>Padrão</b></p>
                <p className="ant-upload-hint">
                    {this.getText()}
                </p>
            </Dragger>
        );
    }

在这里，我将放置它使用的道具：

beforeUpload(file, fileUploaded) {

const isDocx = file.type === 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'

if (!isDocx) {
    message.error('Só é permitido upload de arquivos com extenção .DOCX');

    this.setState({ isDocx: false });

    if (fileUploaded.length > 0)
        fileUploaded = fileUploaded.slice(-1);

    setTimeout(() => {
        document.querySelector("i[title='Remove file']").click()
    }, 1000);

} else {

    setTimeout(() => {
        if (document.querySelectorAll('.ant-upload-list-item-name').length > 1)
            document.querySelector("i[title='Remove file']").click()
    }, 1000);

    this.setState({
        file: file,
        hasFile: true
    })
}

return false

}

然后渲染它：

    render() { 
        return (
            <div onMouseMove={() => this.changeUploadText()}>
                <Modal
                    title="Tipos de Documentos"
                    visible={this.props.NewDocumentTypeModalStore.isOpen}
                    className="org-reclassifyDocument"
                    width="850px"
                    bodyStyle={{ height: 475 }}
                    destroyOnClose={true}
                    onCancel={() => this.cancelModal()}
                    footer={[
                        <Button key="cancel" onClick={() => this.cancelModal()}>Cancelar</Button>,
                        <Button key="ok"
                            disabled={((this.state.valueRadio != 1 || this.state.text == undefined || this.state.text.trim() == "") && (this.state.value == undefined || this.state.hasFile == false))}
                            onClick={() => this.clickRule()} type="primary"
                            loading={this.props.NewDocumentTypeModalStore.isLoading}
                        >
                            Confirmar
                        </Button>
                    ]}
                >
                    <div id="organize">
                        <div id="rigthPanel">
                            <div id="radioButton">
                                {this.getRadioButton()}
                            </div>
                            {this.getBody()}
                        </div>

                        <div id="fileUploader">
                            {this.getFileUploader()}
                        </div>
                    </div>
                </Modal>
            </div>
        );
    }
}

蚂蚁设计中的拖放反应不起作用

0 个答案: