无法使用 useRef 在输入文件上使用 onChange 属性

Question

我想自定义输入文件按钮，所以我决定使用

useRef

，但在这种情况下我无法读取文件属性。我该怎么做？

const inputFile = useRef(null);
const onButtonClick = () => {
  inputFile.current.click();
};
return (
  <>
    <ToggleButtonGroup size="small" className={classes.marginEnd}>
      <input
        style={{ display: "none" }}
        // accept=".xls,.xlsx"
        ref={inputFile}
        onChange={(e) => handleInput(e)}
        type="file"
        // onClick={handleInput}
      />
      <Tooltip title="upload">
        <ToggleButton size={"small"}>
          <CloudUpload onClick={onButtonClick}></CloudUpload>
        </ToggleButton>
      </Tooltip>
    </ToggleButtonGroup>
  </>
);

Answer 1

我尝试创建一个codepen来测试相同的内容，它对我来说效果很好。如果它对您有用，您可以尝试注释掉

onChange

处理程序吗？我的其余代码与您的非常相似。另一个问题可能是，如果您可以放置控制台日志或调试器来测试一次，则不会触发

onButtonClick

功能。

链接到 Codepen - 单击“文件上传”按钮，会出现弹出窗口。

此外，React JS 文档中关于相同内容的一些注释 - 用于文件上传输入的 React 文档

Answer 2

我只需要解决同样的问题。

我的解决方案（应用于您原来问题中的代码）是向

e.preventDefault()

函数添加

onButtonClick

语句。

...

const onButtonClick = (e) => {
  e.preventDefault()
  inputFile.current?.click();
};

return (
  ...
);