我正在尝试设置具有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
:
1条答案
按热度按时间mspsb9vt1#
你的问题的一个解决方案是这样的:
您正在尝试在输入文件中设置字符串,我将解释解决此问题的后续步骤
ref
InputProps
内添加主TextField
中的图标onClick
添加到此图标以调用refs输入,从而弹出选择文件onChange
添加到输入文件以调用您之前创建的方法(handleImageChange)image
字符串赋给主TextField
这是一个有效的示例代码:
现在你可以通过一个来自mui的图标来改变
click
的文本,就是这样!您可以检查此codesandbox以查看最终解决方案是否有效
如果你有什么问题就告诉我