web-dev-qa-db-fra.com

React TypeError this._test n'est pas une fonction

Depuis que je ne connais pas JavaScript et React, j'ai vraiment du mal à trouver la bonne syntaxe.

Voici mon problème:

_handleDrop(files) devrait appeler la fonction _validateXML(txt) mais pas. Je reçois cette erreur Uncaught TypeError: this._validateXML is not a function Et je ne comprends pas pourquoi. Le callBack _handleDrop(files) fonctionne très bien.

Lorsque j'essaie ce type de syntaxe _validateXML:function(txt) j'obtiens immédiatement une erreur lors de la compilation. Est-ce à cause d'ecmascript?

import React from 'react';
import './UploadXML.scss';
import Dropzone from 'react-dropzone';
import xml2js from 'xml2js';

export default class UploadXML extends React.Component {

  constructor() {
    super();
    this._validateXML = this._validateXML.bind(this);
  }

  _validateXML(txt) {
    console.log('Received files: ', txt);
  }

  _handleDrop(files) {
    if (files.length !== 1) {
      throw new Error("Please upload a single file");
    }
    var file = files[0];

    console.log('Received files: ', file);

    this._validateXML(file);
  }

  render() {
    return (
      <div>
            <Dropzone onDrop={this._handleDrop} multiple={false}>
              <div>Try dropping some files here, or click to select files to upload.</div>
            </Dropzone>
      </div>
    );
  }
}
javascriptreactjssyntax-errorecmascript-6
13
Daniel Storch

Lorsque vous utilisez les classes ES6 au lieu de React.createClass, il ne lie pas automatiquement ceci .

La raison pour laquelle:

React.createClass a une fonction magique intégrée qui lie automatiquement toutes les méthodes à cela. Cela peut être un peu déroutant pour les développeurs JavaScript qui ne sont pas habitués à cette fonctionnalité dans d'autres classes, ou cela peut être déroutant lorsqu'ils passent de React à d'autres classes.

Nous avons donc décidé de ne pas intégrer cette fonctionnalité dans le modèle de classe de React. Vous pouvez toujours pré-lier explicitement des méthodes dans votre constructeur si vous le souhaitez.

Voir également: http://facebook.github.io/react/blog/2015/01/27/react-v0.13.0-beta-1.html#autobinding

Ce que vous pourriez faire dans ce cas, c'est le lier à votre fonction _handleDrop, comme:

<Dropzone onDrop={this._handleDrop.bind(this)} multiple={false}>

Vous pouvez également supprimer l'attribution de la fonction à votre constructeur.

12
Timon

Nous avons résolu ce problème en utilisant une fonctionnalité expérimentale es7 qui vous permet de déclarer une fonction de cette manière dans une classe:

handleExpandCollapse = () => {
    this.setState({
      isExpanded: !this.state.isExpanded,
    });
  }

Et cela est lié automatiquement à cela, donc votre JSX sera le même.

0
Vincenzo