Javascript 反应：在功能组件中单击链接时获取输入文件

我对React还不熟悉，javascript希望创建一个名为“Browse”的链接，单击该链接时应将文件作为输入，我在React中的类组件中得到了许多答案，如何在function组件中实现它。我试过：

<div>
     <br /><span>{i18n.gettext('- or - ')}</span>
     <input id='logo-input' ref='logoInput' type='file' onChange={onFileSelected} type='hidden' />
     <a href='' onClick={handleBrowse}>{ i18n.gettext('Browse')}</a>
     <br />
</div>

onFileSelected函数：

const handleBrowse = function(e) {
        e.preventDefault();
        this.refs.logoInput.click();
    };

const onFileSelected = function (e) {
        const file = e.dataTransfer ? e.dataTransfer.files[0] : e.currentTarget.files[0];
        handleFileSelection(file);
    };

当我这样做时，我得到的错误如下：

Stateless function components cannot have refs

---

我知道函数组件不能有ref，我如何实现它呢？如果您将组件重写为类，那么这个错误可能会消失

class MyComponent extends React.Component{

    handleBrowse =(e) => {
        e.preventDefault();
        this.refs.logoInput.click();
    };

    onFileSelected = (e) => {
        const file = e.dataTransfer ? e.dataTransfer.files[0] : e.currentTarget.files[0];
        handleFileSelection(file);
    };

  render(){
     return (
       <div>
         <br /><span>{i18n.gettext('- or - ')}</span>
         <input id='logo-input' ref='logoInput' type='file' onChange={onFileSelected} type='hidden' />
         <a href='' onClick={this.handleBrowse}>{ i18n.gettext('Browse')}</a>
       <br />
      </div>
     )
  }
}

类MyComponent扩展了React.Component{ 把手箭头=（e）=>{ e、 预防默认值（）； this.refs.logoint.click（）； }; onFileSelected=（e）=>{ const file=e.dataTransfer？e.dataTransfer.files[0]：e.currentTarget.files[0]； handleFileSelection（文件）； }; render（）{ 返回(
{i18n.gettext（'-or-'）}
) } } 作为无状态组件，其工作原理如下：

const App = ()=>{

  let myref = null;

  const onFileSelected = (e)=>{
    e.preventDefault();
    console.log(e)
  }

  const handleBrowse = function (e) {
    e.preventDefault();
    myref.click();
  };

   return (
      <div className="App">
        <h1>Hello CodeSandbox</h1>
        <h2>Start editing to see some magic happen!</h2>
        <input id='logo-input' ref={(r) => {myref=r}} type='file' onChange={onFileSelected} />
        <a onClick={handleBrowse}>{ i18n.gettext('Browse')}</a>
      </div>
    );

}

const-App=（）=>{
设myref=null；
const onFileSelected=（e）=>{
e、 预防默认值（）；
控制台日志（e）
}
常量把手箭头=功能（e）{
e、 预防默认值（）；
myref.click（）；
};
返回(
你好，代码沙盒
开始编辑，看看神奇的发生！
{myref=r}}type='file'onChange={onFileSelected}/>
{i18n.gettext（'Browse'）}
);
}

可能必须这样做，但由于它是在prod中，所以您希望以最小的更改尝试它，而不担心错误，如果可以在function componentPerfect中以任何其他方式完成，谢谢