如何在for循环中设置react ref

Posted 2023-02-22

【中文标题】如何在for循环中设置react ref

【英文标题】：How to set react ref in a for loop

【发布时间】：2021-07-29 22:29:55

【问题描述】：

我有一个“fileUpload”组件，我将它传递到我的 React 应用程序中的表单中。

我希望能够为我的 for 循环中的每个输入元素设置一个唯一的 ref，然后将此 ref 传递给删除按钮以删除文件。

文件上传组件

const FileUpload = ( addFile, runClick ) => 
          const uploadButton = [];
          const myRefs = React.useRef([]);
        
          for (let i = 1; i < 6; i += 1) 
            uploadButton.push(
              <div key=i>
                <input
                  type="file"
                  id=`file$i`
                  ref=myRefs.current[i] ?? React.createRef()
                  name=`file$i`
                  onChange=addFile
                />
                <RemoveButton type="button" onClick=() => removeFile()>
                  X buttoni
                </RemoveButton>
              </div>
            );
          
    
      return uploadButton;
    ;
    
    export default FileUpload;

表单组件

//在不使用 FileUploadComponent 和手动设置/传递 ref 的情况下工作

<InputField className="col">
        <input
          type="file"
          id="file3"
          name="file3"
          ref=ref3
          onChange=addFile
        />
        <RemoveButton type="button" onClick=() => removeFile(ref3)>
          X
        </RemoveButton>
      </InputField>

// 尝试自动分配 ref 并传递给删除按钮

<InputField className="col">
    <FileUpload addFile=addFile runClick=() => removeFile() />
  </InputField>

【问题讨论】：

这能回答你的问题吗？ How to deal with a ref within a loop?

【参考方案1】：

你可以在循环之前创建一个引用数组，使用Array.fill()：

const myRefs = useRef(new Array(6).fill(createRef()));

并在循环中使用它：

<input type="file" ref=myRefs[i]/>

【讨论】：

我可以看到正在创建的 refs，但不确定这是否允许我将相同的值传递给 removeFile 点击事件 runClick( myRefs[i])> 然后传递给 runClick=i => runClick(i) 我在函数中看不到它们 const runClick = i => console.log('run click', i); ;