React TypeError this._test 不是函数 [英] React TypeError this._test is not a function

问题描述

由于我是 JavaScript 和 React 的新手，所以我在找出正确的语法时确实遇到了问题.

这是我的问题:

_handleDrop(files) 应该调用函数 _validateXML(txt) 但没有调用.我收到此错误 Uncaught TypeError: this._validateXML is not a function 并且无法弄清楚原因.回调 _handleDrop(files) 工作正常.

当我尝试这种语法 _validateXML:function(txt) 时，我在编译时立即出错.是因为 ecmascript 吗?

从'react'导入React；导入'./UploadXML.scss';从 'react-dropzone' 导入 Dropzone；从 'xml2js' 导入 xml2js；导出默认类 UploadXML 扩展 React.Component {构造函数(){极好的();this._validateXML = this._validateXML.bind(this);}_validateXML(txt) {console.log('收到的文件:', txt);}_handleDrop(文件){如果(文件.长度！== 1){throw new Error("请上传单个文件");}var 文件 = 文件 [0];console.log('收到的文件:', file);this._validateXML(文件)；}使成为() {返回 (<div><Dropzone onDrop={this._handleDrop} multiple={false}><div>尝试在此处删除一些文件，或单击以选择要上传的文件.</div></Dropzone>

);}}

解决方案

当你使用 ES6 类而不是 React.createClass 时，它不会自动绑定this.

原因:

<块引用>

React.createClass 有一个绑定所有方法的内置魔法特性这会自动为您服务.这可能有点令人困惑JavaScript 开发人员在其他方面不习惯此功能类，或者当它们从 React 转移到其他类时可能会令人困惑类.

因此我们决定不将这个内置到 React 的类中模型.您仍然可以在构造函数中显式地预绑定方法，如果你想要.

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

在这个实例中你可以做的是将它绑定到你的 _handleDrop 函数，比如:

您也可以从构造函数中删除函数的分配.

Since im new to JavaScript and React, i really have problems figuring out the right syntax.

Here my problem:

_handleDrop(files) should call the function _validateXML(txt) but doesn't. I receive this error Uncaught TypeError: this._validateXML is not a function and can't figure out why. The callBack _handleDrop(files) works fine.

When i try this kind of syntax _validateXML:function(txt) i immediately get a error while compiling. Is that because of 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>
    );
  }
}

解决方案

When you're using the ES6 classes instead of React.createClass, it does not autobind this.

The reason why:

React.createClass has a built-in magic feature that bound all methods to this automatically for you. This can be a little confusing for JavaScript developers that are not used to this feature in other classes, or it can be confusing when they move from React to other classes.

Therefore we decided not to have this built-in into React's class model. You can still explicitly prebind methods in your constructor if you want.

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

What you could do in this instance is binding this to your _handleDrop function, like:

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

You can also remove the assigning of the function from your constructor.

这篇关于React TypeError this._test 不是函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！