onChange 回调返回错误的 id

Question

我有以下代码

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

Answer 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 数组。