我有 PhotoUploader
类:
import React from 'react';
class PhotoUploader extends React.Component {
constructor(props) {
super(props);
this.state = {}
this.handleFileSelect = this.handleFileSelect.bind(this);
}
handleFileSelect(evt) {
var file = evt.target.files; // FileList object
// Loop through the FileList and render image files as thumbnails.
for (var i = 0, f; f = files[i]; i++) {
// Only process image files.
if (!f.type.match('image.*')) {
alert("Image only please....");
}
var reader = new FileReader();
// Closure to capture the file information.
reader.onload = (function (theFile) {
return function (e) {
// Render thumbnail.
var span = document.createElement('span');
span.innerHTML = ['<img class="thumb" title="', escape(theFile.name), '" src="', e.target.result, '" />'].join('');
document.getElementById('output').insertBefore(span, null);
};
})(f);
// Read in the image file as a data URL.
reader.readAsDataURL(f);
}
}
componentDidMount() {
document.getElementById('fileMulti1').addEventListener('change', handleFileSelect, false);
}
render() {
return (
<div class="container">
<div class="row">
<label>Мультизагрузка файлов:</label>
<input type="file" id="fileMulti1" name="fileMulti[]" multiple />
</div>
<div class="row">
<span id="outputMulti"></span>
</div>
</div>
);
}
}
export default PhotoUploader;
我遇到了麻烦:在 ComponentDidMount
中,我尝试 addEventListener
以输入名为“fileMulti1”的文件。开始后我得到“ReferenceError: handleFileSelect is not defined”
最佳答案
我认为您在引用函数时忘记在 addEventListener 中使用 this
:
document.getElementById('fileMulti1').addEventListener('change', this.handleFileSelect, false);
关于javascript - 函数未定义,但已定义。 react 和Javascript,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57628694/