javascript 设置MUI文件TextField的值会导致异常

rsl1atfo 于 2023-01-19 发布在 Java

关注(0)|答案(1)|浏览(156)

我正在尝试设置具有type="file"属性的MUI文本字段的值，
并且控制台中出现此异常：
Uncaught DOMException: An attempt was made to use an object that is not, or is no longer, usable
只有空字符串不会导致此异常。
以下是我的组件：

const MyComponent = () => {
  const [image, setImage] = useState("");

  const handleImageChange = (event) => {
    event.preventDefault();
    let reader = new FileReader();
    let file = event.target.files[0];
    reader.onloadend = () => {
      setImage(reader.result);
    };
    reader.readAsDataURL(file);
  };

  return (
    <TextField
      helperText="Cover photo"
      type="file"
      value={image}
      onChange={handleImageChange}
    />
  );
};

我尝试简化组件（仍然是相同的例外）：

<TextField type="file" value={"https://www.someSite.com/image.jpg"} />

此外，我尝试使用InputProps设置输入本身的值，仍然是相同的异常。
根据MUI文档，value可以是“任意”，而不考虑type：

JavaScript

来源：https://stackoverflow.com/questions/75153118/setting-the-value-of-a-mui-file-textfield-causes-an-exception

1条答案

按热度按时间

mspsb9vt1#

你的问题的一个解决方案是这样的：
您正在尝试在输入文件中设置字符串，我将解释解决此问题的后续步骤

创建一个隐藏的输入文件和他的ref
在InputProps内添加主TextField中的图标
将onClick添加到此图标以调用refs输入，从而弹出选择文件
将onChange添加到输入文件以调用您之前创建的方法（handleImageChange）
将值image字符串赋给主TextField

这是一个有效的示例代码：

export default function App() {
  const inputFileRef = useRef(null)
  const [image, setImage] = useState("")
  const handleClickInputFile = () => {
    inputFileRef.current.click()
  }

  const handleChangeInputFile = (event) => {
    event.preventDefault();
    let reader = new FileReader();
    let file = event.target.files[0];
    reader.onloadend = () => {
      setImage(reader.result);
    };
    reader.readAsDataURL(file);
  }
  return (
    <div className="App">
      <TextField value={image} onChange={(event => setImage(event.target.value))} multiline fullWidth  InputProps={{
            endAdornment: <InputAdornment position="start" onClick={handleClickInputFile} style={{cursor:"pointer"}}>Click</InputAdornment>,
          }}/>
      <input type="file" ref={inputFileRef} onChange={handleChangeInputFile} style={{display:"none"}}/>
    </div>
  );
}

现在你可以通过一个来自mui的图标来改变click的文本，就是这样！
您可以检查此codesandbox以查看最终解决方案是否有效
如果你有什么问题就告诉我

赞(0）回复(0）举报 2023-01-19

我来回答

javascript 设置MUI文件TextField的值会导致异常

1条答案

相关问题

热门标签

最新问答