在功能组件中使用 ref - 这是正确的方法吗？答案

【问题标题】：Using ref in a functional component - Is this the correct way?在功能组件中使用 ref - 这是正确的方法吗？
【发布时间】：2021-01-26 05:14:38
【问题描述】：

我正在我的 react web-app 中构建一个 csv 文件上传组件。为此，我编写了一个这样的功能组件。有两个输入字段。 (1) type = file 和 (2) type = 'submit'。我想使用file 类型输入上传文件，然后当用户单击submit 类型按钮时，我想对输入类型为file 的files 对象做一些事情。

我这样做如下

import React from 'react';

function CSVUpload() {
    const [handleUpload] = useHandleUpload();

    const ref = React.createRef();
    return(
        <div className='CSV-upload'>
            <input ref={ref} type='file' id='input-csv-upload' multiple/>
            <input type='submit' value='Upload file' onClick={() => handleUpload(ref)}/>
        </div>
    )
}

function useHandleUpload(){
    const handleUpload = (ref) => {
        const files = ref.current.files;
        console.log(files);
    }
    return [handleUpload];
}


  
  export default CSVUpload;

如您所见，我使用 hooks 和 refs 来实现这一点。我可以看到这按预期工作，但我不确定这是否是正确和推荐的方式来使用这样的 refs。我有点困惑，因为我没有使用文档中提到的 forwardRef 之类的东西。我只是创建了一个简单的 react ref，使用 HTML 属性将它附加到我的输入，然后在我的 onClick 处理程序中访问它。

我只是想确保这不会在未来造成任何问题。一点反馈会很棒。提前致谢。

【问题讨论】：

标签： reactjs

【解决方案1】：

在功能组件中，使用钩子版本会更合适，useRef：

const ref = useRef();

这里的逻辑不会有什么不同，但这是一个养成的好习惯。（createRef 将在每次渲染时创建一个新的 ref，这通常是不可取的 - 如果其他东西将它用作道具或在依赖数组中，它们会比需要更频繁地重新运行/重新渲染）

不过，如果您愿意，您可以通过导航到点击处理程序中的上一个元素来完全移除 refs 的使用：

const clickHandler = e => handleUpload(e.target.previousElementSibling);

<input type='submit' value='Upload file' onClick={clickHandler}/>

（type="submit" 看起来很奇怪 - 如果这是在一个表单中，你也需要调用 e.preventDefault()。如果它不在一个表单中，type="submit" 不会做任何事情，我相信）

我也看不出挂钩handleUpload 有什么意义，我只是在主体CSVUpload 中声明handleUpload，如果你愿意，可以加上useCallback。

【讨论】：

也代替type=submit，要不要改成<button>？