e.preventDefault() 或返回 false 无法停止文件输入打开答案

【问题标题】：e.preventDefault() or return false failed to stop file input to opene.preventDefault() 或返回 false 无法停止文件输入打开
【发布时间】：2017-04-09 09:39:33
【问题描述】：

上传文件时如何阻止文件上传窗口打开？

export default class Upload extends Component {
    constructor(props) {
        super(props);

        this.state = {
            filename: null,
            isLoading: false
        }

    }

    trigger_upload_input = () => {
        document.getElementById("browse-file").click();
    }

    handleOnChange = (e) => {
        if(e.target.files[0]) {
            this.setState({filename: e.target.files[0].name, isLoading: true});
            var that = this;

            setTimeout(function(){
                that.setState({isLoading: false})
            },3000)
        }

    }

    handleInputClicked = (e) => {
        if(this.state.isLoading){
            e.preventDefault();
        }
    }

    render() {
        const { isLoading } = this.state;
        return(
            <div className="upload">
                <div>
                    <input onClick={this.handleInputClicked} onChange={this.handleOnChange} type="file" id="browse-file"/>
                    {this.state.filename && <span>{this.state.filename}</span>}
                </div>
            </div>
        )
    }
}

加载指示器工作，但是当我尝试再次单击输入时，e.preventDefault() 不会停止文件窗口打开，尝试return false 并没有解决问题？

【问题讨论】：

标签： javascript reactjs ecmascript-6

【解决方案1】：

试试e.stopPropagation()，可能会有所帮助（event.stopPropagation()）。

更新

看起来，disabled 属性可以通过 onChange 处理程序添加。这将阻止对话框打开。加载完成后可以移除该属性。

【讨论】：

可能只是在输入中添加一个disabled 属性以防止它被点击？

【解决方案2】：

你可以像这样~~hack~~浏览器行为

e.target.disabled = true;
setTimeout(function () { e.target.disabled = false; }, 500);

【讨论】：