Question

由于我是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>
    );
  }
}

Answer 1

当您使用ES6类而不是React.createClass时，它不会自动绑定此。

之所以：

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}>

您也可以从构造函数中删除函数的赋值。

Answer 2

我们解决这个问题的方法是使用实验性es7功能，它允许您在类中以这种方式声明函数：

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

这是自动对应的，所以 JSX 将是相同的。

Answer 3

此外，当某人将函数传递给名称错误的子组件时，也可能发生此错误（不在问题aske中），即，由于拼写未定义在子组件中访问的函数错误。

我来这里是为了解决这个问题，但发现情况确实如此。 :) 希望它能对某人有所帮助。

React TypeError this._test不是函数

3 个答案: