javascript - 功能未定义，但已定义。反应和 Javascript

Question

我有课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”

标签： javascriptreactjs

Answer 1

this我认为您在引用函数时忘记在 addEventListener 中使用：

document.getElementById('fileMulti1').addEventListener('change', this.handleFileSelect, false);