如何在 for 循环中设置 react ref

Question

我有一个 '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 button{i}
                </RemoveButton>
              </div>
            );
          }
    
      return uploadButton;
    };
    
    export default FileUpload;

表单组件

//不使用 FileUploadComponent 和 setting/passing 手动引用

<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>

Answer 1

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

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

并在循环中使用它，如：

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

如何在 for 循环中设置 react ref

How to set react ref in a for loop

javascript

ref

reactjs