web-dev-qa-db-ja.com

React TypeError this._testは関数ではありません

JavaScriptとReactは初めてなので、正しい構文を理解するのに本当に問題があります。

ここに私の問題：

_handleDrop(files)は関数_validateXML(txt)を呼び出す必要がありますが、呼び出しません。このエラー_Uncaught TypeError: this._validateXML is not a function_が発生し、その理由がわかりません。 callBack _handleDrop(files)は正常に動作します。

この種の構文_validateXML:function(txt)を試すと、コンパイル中にすぐにエラーが発生します。それは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

React.createClassの代わりにES6クラスを使用している場合、自動バインドthisしません。

理由：

React.createClassには、すべてのメソッドをこれに自動的にバインドする組み込みのマジック機能があります。これは、他のクラスのこの機能に慣れていないJavaScript開発者にとっては少し混乱するかもしれませんし、Reactから他のクラスに移動するときに混乱するかもしれません。

したがって、これをReactのクラスモデルに組み込まないことにしました。必要に応じて、コンストラクタでメソッドを明示的に事前バインドすることもできます。

次も参照してください： http://facebook.github.io/react/blog/2015/01/27/react-v0.13.0-beta-1.html#autobinding

このインスタンスで実行できることは、次のように、これを_handleDrop関数にバインドすることです。

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

コンストラクターから関数の割り当てを削除することもできます。

12
Timon

この問題を解決する方法は、クラス内でこのように関数を宣言できる実験的なes7機能を使用することです。

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

そして、これはこれに自動バインドされるので、あなたの[〜＃〜] jsx [〜＃〜]は同じになります。

0
Vincenzo