有关于React中主动调用file input元素的click方法时所遇到的问题

Question

我自己写了一个文件选择组件，此组件中包涵一个原生Input file元素，它是被隐藏的，当点击我的容器元素的时候，通过refs拿到这个file input元素，调用该元素的click()方法直接就调出文件选择对话框，这是没有问题的。但是当后来，我想在此组件暴露出一个props接口，这个props接受一个布尔类型值，名字叫做fileSelectTrigger，也就是说当fileSelectTriggerz这个props接收到一个true时，我会在组件的componentDidUpdate这个钩子里面调用通过refs拿到的file input元素的click方法，但是文件选择对话框并没有弹出来，我不能理解这是为什么。
ps: 我还尝试了另外一些钩子，例如componentWillUpdate、shouldComponentUpdate、componentWillReceiveProps ，我在这些钩子中判断fileSelectTrigger为true时，调用file input的click方法也都不能弹出文件选择框，尝试了异步调用还是不行。。

我没有直接把我原来的代码放到这里，因为代码太多了，我直接写了另一个例子，来描述这个问题，请看：

// FileInput.js
import { Component } from 'react'
export default class extends Component {
    componentWillReceiveProps(props){
           if(props.fileSelectTrigger == true){
               this.fileInput.click()
           }
    }
    handleClick = (event) => {
        console.log('我被点击了！')
    }
    render() {
        return (
            <div className={'container'} >
                <Input type="file" onClick={this.handleClick} ref={el => this.fileInput = el} />
            </div>
        )
    }
}

// xxx.js
import { Component } from 'react'
import FileInput from './FileInput'
class Demo extends Component {
    state = {
        fileSelect: false
    }
    componentDidMount() {
        setTimeout(() => {
            this.setState({
                fileSelect: true
            })
        }, 2000)
    }
    render() {
        return (
            <FileInput fileSelectTrigger={this.state.fileSelect} />
        )
    }
}

// 伪代码：将Demo挂载到#root元素

类似这样， 当Demo组件被挂载到#root元素，2秒后，将会setState改变状态，这时会重新render，子元素在接收到新的props时，“我被点击了！”会输出出来，但是文件选择框并没有弹出来，这是为什么，求高人解惑！！

Answer 1

我试了focus是有效的,问题应该是浏览器做了安全限制
This is due to a security restriction.Most browsers prevent submitting files when the input field didn't receive a direct click or keyboard click event as a security precaution.