时间戳

首页 > 解决方案 > setState 无法处理来自 onClick 侦听器的文件输入

reactjs - setState 无法处理来自 onClick 侦听器的文件输入

问题描述

我有一个上传组件，可以将图像上传到 firebase。成功后，我想清空文件输入并重新渲染组件，但是似乎我无法重置状态以触发重新渲染。我已经读过，将状态设置为 null 不起作用，所以我尝试了一个虚拟对象，但控制台日志总是给我以前的文件名。

我会感谢重新渲染修复或一些一般性建议如何更好地处理这个问题。

const onFileChange = (e) => {
    setFile(e.target.files[0]);
};

const onUpload = async () => {
    if (file) {
        // do something
        setFile({ file: "none" });
        console.log(file.name);
    }
};

return (
    <>
        <input type="file" onChange={onFileChange} />
        <button onClick={onUpload}>Upload image</button>
    </>
);

标签： reactjs

解决方案

在 React 中重置文件输入字段的一种方法是设置ref绑定，并根据需要将其值设置为空字符串。在valueReact 的文件输入中，prop 是无用的，因为它是不受控制的，因此以这种方式强制重新渲染是徒劳的。

useEffect(()=>{
  if (file === "none"){
    this.fileInput.value = "";
  }
}, [file])

const onUpload = async () => {
  if (file) {
    // do something
    setFile("none");
  }
};

<input type="file" onChange={onFileChange} ref={(ref)=>{this.fileInput = ref}} />

CodeSandBox：https ://codesandbox.io/s/boring-mirzakhani-7d16s?file=/src/App.js

推荐阅读