Function is not defined, but it is defined. React and Javascript

Question

I have class 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;

And I have trouble: In ComponentDidMount I trying to addEventListener to file input named 'fileMulti1'. And after starting I get "ReferenceError: handleFileSelect is not defined"

Answer 1

You need to prefix handleFileSelect with this, since the method is defined on the class:

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

But because you're using react it would be more ideomatic to use react directly to register the event handler:

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;

Answer 2

I think you forgot to use this in the addEventListener when referencing the function:

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