时间戳

首页 > 解决方案 > 可复用函数组件错误回调

reactjs - 可复用函数组件错误回调

问题描述

我创建了一个非常简单的可重用文件上传组件。我在我的项目中使用了两次，但是称为“onChange”的回调是不正确的，例如它是从第二次使用而不是第一次调用函数。

我最初使用的是 refs，所以我将 ref 移到父组件上，通过 forwardRef 将其传递给子组件，并设置 onChange 以监视元素的 files 数组长度，并在它更改时运行回调函数。但这导致了同样的问题。

const FileUpload = ({ file, className, children, text }) => {
  const handleChange = e => {
    if (
      e.currentTarget.files.length > 0 &&
      e.currentTarget.files[0].type.split("/")[0] === "image"
    ) {
      file(
        e.currentTarget.files[0],
        e.currentTarget.files[0].name.split(".")[1]
      );
    }
  };
  return (
    <Label htmlFor="file" className={className}>
      {children}
      {text}
      <Input type="file" onChange={handleChange} id="file" name="file" />
    </Label>
  );
};

export default FileUpload;

<FileUpload file={handleFile} text="Upload Image" />

“文件”回调执行“onChange”，但它是不正确的实例，我从组件的第二次使用而不是第一次调用该函数。

标签： reactjs

解决方案

所以答案是 id 我有固定的 id 值，这反过来意味着当多次使用组件时，DOM 中会有重复的 id。标签上的 htmlFor 属性将激活文件输入的浏览对话框，但由于存在两个具有相同 id 的输入，因此激活了错误的一个。

修复：动态设置 id，在我的情况下，我添加了一个 'uid' 道具，并在每次使用组件时从父级传递一个值。它现在按预期工作。

感谢@ArianKhosravi 为我指明了正确的方向。

推荐阅读