可重用函数组件错误回调答案

【问题标题】：Reuseable function component incorrect callback可重用函数组件错误回调
【发布时间】：2020-02-06 04:04:20
【问题描述】：

我创建了一个非常简单的可重用文件上传组件。我在我的项目中使用了两次，但是称为“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”中执行，但它是不正确的实例，我是从组件的第二次使用而不是第一次调用该函数。

【问题讨论】：

这可能与您的问题无关，但我不会在可重用组件中使用固定 id，即id="file"
你可以通过...this.props将父道具传递给孩子，现在应该变成<FileUpload file={handleFile} text="Upload Image" ...this.props />
@ArianKhosravi 这确实是问题所在，不敢相信这在我之前没有发生过。应该很明显，在 DOM 中永远不会有重复的 id。我在标签上的“htmlFor”的输入上使用了 id，因为我有一个样式为按钮的标签，用于打开浏览对话框以选择文件。我现在已经制作了这个动态并将其作为道具传递，因此每次使用时 id 都不同。
@MuhammadZia 该语法不是用于类组件，而是简单地用于函数组件的 ...props。我喜欢明确说明我的 props，因此组件只传递与它们相关的内容。
@M1ke 对此感到抱歉，对于一个功能组件，它将是 ...props，我目前正在做一个有类的项目，所以很多时候都错过了。

标签： reactjs

【解决方案1】：

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

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

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

【讨论】：