在功能组件中使用ref -这是正确的方式吗?

Question

我正在构建一个csv文件上传组件在我的react web-app。为此，我编写了一个像这样的功能组件。有两个输入字段。(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;

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

我只是想确保这不会在将来产生任何问题。如果能得到一点反馈就太好了。提前谢谢。

Answer 1

在功能组件中，使用钩子版本useRef:

会更合适。

const ref = useRef();

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

但是，如果您愿意，您可以通过导航到click处理程序中的前一个元素来完全删除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。