Javascript 如何在for循环中设置react ref

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

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

文件上传组件

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;

constfileupload=（{addFile，runClick}）=>{
常量上传按钮=[]；
const myRefs=React.useRef（[]）；
对于（设i=1；i<6；i+=1）{
上传按钮(
removeFile（）}>
X按钮{i}
);
}
返回上传按钮；
};
导出默认文件上传；

FormComponent

//在不使用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>

removeFile（参考文献3）}>
X

//尝试自动分配ref并将其传递给delete按钮

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

removeFile（）}/>

您可以使用以下方法在循环之前创建引用数组：

并在循环中使用它，如：

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

这是否回答了您的问题？我可以看到正在创建引用，但不确定这是否允许我将相同的值传递到removeFile click事件runClick（myRefs[I]）}>，然后传递到runClick={I=>runClick（I）}。我在函数const runClick=I=>{console.log（'run click'，I）；}中看不到它们；

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