Javascript React TypeError this._test 不是函数
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/33872361/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
React TypeError this._test is not a function
提问by Daniel Storch
Since im new to JavaScript and React, i really have problems figuring out the right syntax.
因为我是 JavaScript 和 React 的新手，所以我真的很难弄清楚正确的语法。
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 functionand can't figure out why.
The callBack _handleDrop(files)works fine.
_handleDrop(files)应该调用该函数，_validateXML(txt)但没有调用。我收到此错误Uncaught TypeError: this._validateXML is not a function，但无法弄清楚原因。回调_handleDrop(files)工作正常。
When i try this kind of syntax _validateXML:function(txt)i immediately get a error while compiling. Is that because of ecmascript?
当我尝试这种语法时，_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>
);
}
}
采纳答案by Timon
When you're using the ES6 classes instead of React.createClass, it does not autobind this.
当您使用 ES6 类而不是 React.createClass 时，它不会自动绑定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.
React.createClass 有一个内置的魔法特性，可以自动为你绑定所有方法。对于不习惯其他类中的此功能的 JavaScript 开发人员来说，这可能会有点混乱，或者当他们从 React 转移到其他类时可能会感到困惑。
因此我们决定不将这个内置到 React 的类模型中。如果需要，您仍然可以在构造函数中显式地预绑定方法。
Also see: http://facebook.github.io/react/blog/2015/01/27/react-v0.13.0-beta-1.html#autobinding
另见：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:
在这个实例中你可以做的是将它绑定到你的 _handleDrop 函数，比如：
<Dropzone onDrop={this._handleDrop.bind(this)} multiple={false}>
You can also remove the assigning of the function from your constructor.
您还可以从构造函数中删除函数的分配。
回答by Vincenzo
The way we solved this issue is to use an experimental es7 feature which lets you declare a function in this way within a class:
我们解决这个问题的方法是使用一个实验性的 es7 特性，它允许你在类中以这种方式声明一个函数：
handleExpandCollapse = () => {
this.setState({
isExpanded: !this.state.isExpanded,
});
}
And that is autobound to this, so your JSXwill be the same.
这是自动绑定的，所以你的JSX将是相同的。
