onChange 回调返回错误的 id

Posted 2023-02-22

【中文标题】onChange 回调返回错误的 id

【英文标题】：onChange callback returns wrong id

【发布时间】：2019-11-11 16:58:42

【问题描述】：

我有以下代码

const inputRef = useRef<htmlInputElement>(null);

const handleClick = () => 
  if (inputRef.current) inputRef.current.click();
;

return (
    <Container fixed>
      <div className=classes.root>
        <Grid container spacing=1>
          data &&
            data.map(category => (
    ...
    <Link to=`/products/$category.id`>
    ...
<input
  accept="image/*"
  hidden
  type="file"
  ref=inputRef
  onChange=e => handleChange(e, category.id)
/>
<IconButton onClick=handleClick>
  <InsertPhoto />
</IconButton>

由于某种原因，链接组件 category.id 为 1，但在句柄更改中，我只是在控制台记录 id 并返回 10（最后一个 category.id）这怎么可能？完整代码可以在这里找到https://pastebin.com/ZiDTkdTU

【问题讨论】：

请提供小提琴链接而不是 pastebin

【参考方案1】：

您的代码有问题是ref 您正在使用。

data 数组中有几个类别（您提到了 10 个）。但是只有一个inputRef 存在。因此，在遍历数组时，您将此单个 ref 绑定到每个输入。最后 inputRef 绑定到最后一个 <input> 元素。

然后单击<IconButton> 插入照片，此单击将转移到<input> 元素，该元素将打开文件选择对话框（因为它有type="file"）。但是无论<IconButton>点击总是转移到最后一个<input>元素，因为你有一个inputRef。所以onChange 也总是在最后输入时触发，显示id === 10。

问题变得更糟，因为<input> 元素被隐藏并且您看不到<input> 元素接受的文件。

解决方案是创建引用数组，每个引用为单个<input>。

这里是sample 来展示这种效果。无论您选择什么“选择文件”按钮，都会为最后一个 <input> 选择文件，并且控制台将始终记录 3。

这里是正确的sample，它使用了 ref 数组。

【讨论】：

你能告诉我一些创建参考数组的例子吗？据我所知这是不可能的

你可以看看***.com/questions/47055464/…。这描述了如何使用 refs 数组