当前位置: 首页 > 知识库问答 >
问题:

如何在for循环中设置反应参考

邓令雪
2023-03-14

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

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

FileUploadComponent

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;

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>

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

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

共有1个答案

通正平
2023-03-14

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

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

并在循环中使用它,比如:

<input type="file" ref={myRefs[i]}/>
 类似资料:
  • 问题内容: 我的问题很简单。 循环是否评估它每次使用的参数? 如: python是否为该循环的每次迭代创建300个项目的列表? 如果是这样,这是避免这种情况的方法吗? 这样的代码示例也是如此。 是每一次应用反向过程,还是在每次迭代中计算长度?(我同时要求python2和python3) 如果不是,Python在迭代时如何评估可迭代的更改? 问题答案: 不用担心,迭代器只会被评估一次。它最终大致等同

  • 问题内容: 最初,我使用以下ajax设置cookie。 现在,我想使用servlet的添加cookie函数来设置cookie。但是我不知道如何实现我的目标。 为了延长Cookie的时间限制,我应该在React端写些什么来接收Cookie的会话时间? 问题答案: 看来以前在npm软件包中存在的功能已移至。现在,来自通用Cookie存储库的相关示例是:

  • 我在mysql数据库中有一个数组数据,我想在使用Ajax得到结果后,用for循环逐个显示出来。过程是这样的。 这是将呈现每个项的段落 null 当我尝试使用for循环时,它会说语法错误,意外的for循环被取走,我该如何解决这个问题,例如,这里我使用sample for循环来使事情尽可能简单。

  • 问题内容: 我试图在for循环内发出几个服务器请求。我发现了[\这个问题,\并实施了建议的解决方案。但是,它似乎不起作用。 如果我删除了for循环并将所有xmlhttp [i]更改为xmlhttp,那么对于一个元素来说一切都很好,但是我无法发出多个请求。在此先感谢您的任何建议。 问题答案: 尝试下面的代码段 响应

  • 我正在学习JavaScript/React。我试图在react网站上为tic-tac-toe示例创建一个简单的for循环,但到目前为止,它一直存在问题。奇怪的是,有几个映射示例,但没有for循环示例。 无论如何,对于以下各项: 当我替换"测试代码"时,这个工作 但这次失败了 第二个选项失败,因为它没有创建“单独的”onClick元素。我怎样才能使失败的例子起作用? 更新#1 更新#2我按照@Mat

  • 问题内容: 我正在编写代码以确定nxn列表中的每个元素是否相同。即返回true,但将返回false。我正在考虑编写一个代码,当它发现与第一个元素不同的元素时立即停止。即: 我想停止此循环, 然后返回false。否则返回true。我将如何实施呢? 问题答案: 使用和为此。可以使用以下命令在Python中完成打破嵌套循环的操作: 另一种方法是将所有内容包装在函数中,并用于从循环中退出。