React INPUT TYPE=FILE 组件Class和funciton两种使用
creat-react-app脚手架创建的index.js和App.js里默认是function方式的组件运用：
调用原生input组件格式为：
<input
type="file"
className="App-input-file"
multiple
onChange={handleFile}
>
</input>
因为function内可以不需要this绑定，所以事件调用很简单
onChange={handleFile},
然后在render函数外面定义handleFile即可
function handleFile (event){
const files = [...event.target.files];
if (files.length === 0) return;
console.log(files)
for(let i=0;i<files.length;i++) {
console.log(files[i])
console.log(getFileURL(files[i]))
}
}
以上两步都未涉及到this，对于初学者来说很方便。
当然，如果要使用Class构建一个基于原生input的FileInput组件时，则需要把this绑定一并考虑否则会报错。
具体定义如下：
class FileInput extends React.Component {
constructor(props) {
super(props);
this.state = {
value: null,
};
this.handleFile = this.handleFile.bind(this); #必须使用本语句绑定this
}
getFileURL(file) {
var getUrl = null;
if (window.createObjectURL !== undefined) { // basic
getUrl = window.createObjectURL(file);
} else if (window.URL !== undefined) { // mozilla(firefox)
getUrl = window.URL.createObjectURL(file);
} else if (window.webkitURL !== undefined) { // webkit or chrome
getUrl = window.webkitURL.createObjectURL(file);
}
return getUrl;
}
handleFile (event){
const files = [...event.target.files];
if (files.length === 0) return;
console.log(files)
for(let i=0;i<files.length;i++) {
console.log(files[i])
console.log(this.getFileURL(files[i]))
}
}
render() {
return (
<input
type="file"
id="record_file"
name="record_file"
className="App-input-file"
multiple
onChange={this.handleFile} #比function内定义时多了this，需要在constructor内显式绑定
>
</input>
);
}
}
以上是 React INPUT TYPE=FILE 组件Class和funciton两种使用 的全部内容， 来源链接： utcz.com/z/381272.html
