解决Input的blur事件和Button的 click 事件冲突 导致 click无法触发的问题

244 阅读1分钟

现象: 先填写Select中的内容,再上传文件需要点击两次上传按钮
问题原因: Input的blur事件和Button的 click 事件冲突 导致 click无法触发
解决方案: 将点击事件放在mousedown事件中触发
原理: 执行顺序mousedown->(other)blur->mouseup->click

Input 的 blur 事件

<Select open={false} mode='tags' maxTagTextLength={6} />

button 触发 click

<Upload {...props}>
    <Button
        onMouseDown={e => {
        /* 解决Input的blur事件和Button的 click 事件冲突 导致 click无法触发的问题 */
        /* 执行顺序mousedown->(other)blur->mouseup->click */
        e.target?.click?.();
    }}>
    文件上传
    </Button>
</Upload>