有没有办法在 React 中动态访问 ref 的属性？

Question

我有一个包含四个文件输入的表单。不同目的文件的不同输入。

我为每个文件创建了一个 ref。

我已经创建了一个引用数组。

提交时，我试图访问所有参考并获取他们的 ref.current.files[0]。

下面的示例代码：

import {useRef} from 'react';

export default function myComponent(props){

const file1 = useRef(null);
const file2 = useRef(null);
const file3 = useRef(null);
const file4 = useRef(null);

const fileRefs = [file1, file2, file3, file4];

function onSubmit(){
  let files = [];

  fileRefs.map((ref) => {
    let obj = {};
    obj.fileName = ref.current.files[0].name;
    obj.file = ref.current.files[0];
    files.push(obj)
  })
}

render(
<div className="form">

<label>File 1 </label>
<input type="file" ref={file1} />

<label>File 2 </label>
<input type="file" ref={file2} />

<label>File 3 </label>
<input type="file" ref={file3} />

<label>File 4 </label>
<input type="file" ref={file4} />

<button onClick={() => onSubmit()}>Submit</button>

</div>
)
}

错误：“TypeError：无法读取 null 的属性（读取 'files'）”

所以，我无法以这种方式访问 ref 的 .current 属性。

我真的不知道如何解决这个问题，只是想拼凑一些东西。

如果有人能帮助我找到一种动态访问 ref 的当前属性的方法，那就太好了。

Answer 1

我没有在您的代码中看到问题，就其本身而言，如果您 select 一个文件用于所有文件输入，它就可以工作。只有在没有 selected 文件的情况下留下任何输入时才会出现此问题。

要解决此问题，您可以使用 Optional Chaining operator 对文件对象执行空检查。

ref.current.files[0]?.name

如果ref.current.files[0]为null或undefined，则对文件对象的访问被短路并返回undefined，否则继续访问并返回文件名。

代码：

function onSubmit() {
  const files = fileRefs.map((ref) => ({
    fileName: ref.current.files[0]?.name,
    file: ref.current.files[0],
  }));

  console.log({ files });
}

Answer 2

在您的代码中使用 return 而不是 render，您使用了渲染功能不可用的功能组件。检查此 link 以获得有效的解决方案 https://codesandbox.io/s/wonderful-faraday-upg89?file=/src/App.js

有没有办法在 React 中动态访问 ref 的属性？

Is there a way to dynamically access a ref's properties in react?

javascript

reactjs

react-hooks

use-ref