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。

onChange回调返回错误的ID

1 个答案: