javascript - 文件上传开始/完成时显示/隐藏微调器
问题描述
我正在使用这个 React 组件将文件上传到浏览器(而不是服务器)。该组件是react-jsonschema-form库的一部分,所以我无法更改源代码。该render
组件的方法如下图所示
render() {
const { multiple, id, readonly, disabled, autofocus } = this.props;
const { filesInfo } = this.state;
return (
<div>
<p>
<input
ref={ref => (this.inputRef = ref)}
id={id}
type="file"
disabled={readonly || disabled}
onChange={this.onChange}
defaultValue=""
autoFocus={autofocus}
multiple={multiple}
/>
</p>
<FilesInfo filesInfo={filesInfo} />
</div>
);
}
该组件接受一个或多个文件作为输入,base64 对它们进行编码,并将编码后的文件存储在内存中。
但是,如果用户选择一个大文件(例如 5MB),处理时会有明显的延迟。我想在此处理开始时显示一个微调器,并在它完成时隐藏它,但我找不到显示/隐藏微调器的相关事件。
如果它是相关的,我有一个ref
小部件,并且可以使用ref
它<input>
通过myWidgetRef.inputRef
.
解决方案
You can add the change
event listener to the input ref, which will be called when a file is selected.
仅在上传完成时调用作为 prop 传递的 onChange 函数
然后使用onChange
道具来处理处理完成。
import React from "react";
import { render } from "react-dom";
import Form from "react-jsonschema-form";
import FileWidget from "react-jsonschema-form/lib/components/widgets/FileWidget";
class MyForm extends React.Component {
constructor(props) {
super(props);
this.state = {
processing: false
};
this.inputChanged = this.inputChanged.bind(this);
}
inputChanged() {
console.log("processing");
this.setState({ processing: true });
}
componentDidMount() {
this.fileWidget.inputRef.addEventListener("change", this.inputChanged);
}
componentWillUnmount() {
this.fileWidget.inputRef.removeEventListener("change", this.inputChanged);
}
render() {
return (
<React.Fragment>
<div>Is processing: {this.state.processing + ""}</div>
<Form
schema={{
type: "object",
properties: {
file: {
type: "string",
format: "data-url"
}
}
}}
widgets={{
FileWidget: props => (
<FileWidget
{...props}
ref={ref => {
this.fileWidget = ref;
}}
onChange={() => {
console.log("processed");
this.setState({ processing: false });
}}
/>
)
}}
liveValidate
/>
</React.Fragment>
);
}
}
render(<MyForm />, document.getElementById("root"));
推荐阅读
- firebase - Firebase:通过云功能检查用户电子邮件是否经过验证
- python - 如何创建一个快速的 Python GUI 来控制用于面部检测的网络摄像头输入?
- amazon-web-services - 如何正确(可扩展地)将许多 ORC 文件读入 spark
- python - 我无法将其他组的用户添加到我的组
- adb - AndroidVIewClient-如何在多台设备上同时运行一个python脚本
- regex - 从 DataFrame 的列表中删除所有包含“@”的单词
- orleans - 从 1.5.3 迁移到 2.0 的连接问题
- web-scraping - 从 URL 触发按钮单击
- c# - 如何使用局部变量作为类型
- forms - 在 Paypal html 表单中防止 XSS 攻击