[英]Function is not defined, but it is defined. React and Javascript
我有类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 未定义”
我认为您在引用函数时忘记在 addEventListener 中使用this
:
document.getElementById('fileMulti1').addEventListener('change', this.handleFileSelect, false);
您需要使用this
前缀handleFileSelect
,因为该方法是在类中定义的:
componentDidMount() {
document.getElementById('fileMulti1').addEventListener('change', this.handleFileSelect, false);
}
但是因为您使用的是 react,所以直接使用 react 来注册事件处理程序会更理想:
import React from 'react';
class PhotoUploader extends React.Component {
constructor(props) {
super(props);
this.state = {
output: []
};
this.handleFileSelect = this.handleFileSelect.bind(this);
}
handleFileSelect(evt) {
Array.from(evt.target.files).forEach(file => {
// Only process image files.
if (!file.type.match('image.*'))
alert("Image only please....");
let reader = new FileReader();
reader.onload = ev => {
this.setState(state => ({
output: state.output.concat({
file,
content: ev.target.result
})
}));
};
// Read in the image file as a data URL.
reader.readAsDataURL(file);
});
}
renderOutput() {
return this.state.output.map(({file, content}, idx) => (
<span key={idx}>
<img className="thumb" title={file.name} src={content} />
</span>
));
}
render() {
return (
<div className="container">
<div className="row">
<label>Мультизагрузка файлов:</label>
<input type="file" id="fileMulti1" name="fileMulti[]" multiple onChange={this.handleFileSelect} />
</div>
<div className="row">
<div id="output">
{this.renderOutput()}
</div>
</div>
</div>
);
}
}
export default PhotoUploader;
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.