时间戳

首页 > 解决方案 > onChange 回调返回错误的 id

reactjs - onChange 回调返回错误的 id

问题描述

我有以下代码

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

标签： reactjs

解决方案

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

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

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

<input>随着元素被隐藏并且您看不到哪个<input>元素接受文件，问题变得更糟。

解决方案是创建 refs 数组，每个用于 single <input>。

这是展示这种效果的示例。无论您选择什么“选择文件”按钮，最后都会选择文件<input>，控制台将始终记录 3。

这是使用 ref 数组的正确示例。

推荐阅读