Reactjs &引用；“未定义”不是对象；这个州不受约束

我通过

react.createClass

创建的react本机组件似乎没有正确绑定

this

关键字，阻止我访问

this.state

。下面是我得到的错误：

代码如下。我看不到与网站上的示例有任何本质上的不同，因此我无法找出我做错了什么。我怎样才能解决这个问题

'use strict';

var React = require('react-native');

var Main = React.createClass({
  getInitialState: () => {
    return { username: '', isloading: false, iserror: false };
  },
  handleChange: (event) => {
    this.setState({
      username: event.nativeEvent.text
    });
  },
  handleSubmit: (event) => {
    this.setState({
      isloading: true
    });
    console.log('Submitting... ' + this.state.username);
  },
  render: () => {
    return (
      <View style={styles.mainContainer}>
        <Text> Search for a Github User</Text>
        <TextInput style={styles.searchInput}
                   value={this.state.username}
                   onChange={this.handleChange.bind(this)} /> 
        <TouchableHighlight style={styles.button}
                            underlayColor='white'
                            onPress={this.handleSubmit.bind(this)} /> 
        <Text style={styles.buttonText}> SEARCH</Text>
      </View>
    );
  }
});

var { Text, View, StyleSheet, TextInput, TouchableHighlight, ActivityIndicatorIOS } = React;

var styles = StyleSheet.create({
  mainContainer: {
    flex: 1,
    padding: 30,
    marginTop: 65,
    flexDirection: 'column',
    justifyContent: 'center',
    backgroundColor: '#48BBEC'
  },
  title: {
    marginBottom: 20,
    fontSize: 25,
    textAlign: 'center',
    color: '#fff'
  },
  searchInput: {
    height: 50,
    padding: 4,
    marginRight: 5,
    fontSize: 23,
    borderWidth: 1,
    borderColor: 'white',
    borderRadius: 8,
    color: 'white'
  },
  buttonText: {
    fontSize: 18,
    color: '#111',
    alignSelf: 'center'
  },
  button: {
    height: 45,
    flexDirection: 'row',
    backgroundColor: 'white',
    borderColor: 'white',
    borderWidth: 1,
    borderRadius: 8,
    marginBottom: 10,
    marginTop: 10,
    alignSelf: 'stretch',
    justifyContent: 'center'
  },
});

module.exports = Main

“严格使用”；
var React=require（'React-native'）；
var Main=React.createClass({
getInitialState:（）=>{
返回{用户名：''，isloading:false，iserror:false}；
},
handleChange：（事件）=>{
这是我的国家({
用户名：event.nativeEvent.text
});
},
handleSubmit：（事件）=>{
这是我的国家({
孤岛加载：正确
});
log（'Submitting…'+this.state.username）；
},
渲染：（）=>{
返回(
搜索Github用户
搜寻
);
}
});
var{Text，View，StyleSheet，TextInput，TouchableHighlight，ActivityIndicatorIOS}=React；
var styles=StyleSheet.create({
主容器：{
弹性：1，
填充：30，
玛金托普：65，
flexDirection:'列'，
为内容辩护：“中心”，
背景颜色：“#48BBEC”
},
标题：{
marginBottom:20，
尺寸：25，
textAlign:'中心'，
颜色：'#fff'
},
搜索输入：{
身高：50，
填充：4，
marginRight:5，
尺寸：23，
边框宽度：1，
边框颜色：“白色”，
边界半径：8，
颜色：“白色”
},
按钮文字：{
尺码：18，
颜色：'#111'，
自我定位：“中心”
},
按钮：{
身高：45，
flexDirection:'行'，
背景颜色：“白色”，
边框颜色：“白色”，
边框宽度：1，
边界半径：8，
marginBottom:10，
玛金托普：10，
自我定位：“拉伸”，
为内容辩护：“中心”
},
});
module.exports=Main

问题在于在

渲染：（）=>{

中使用ES6 fat箭头，这将导致

.createClass

函数中的自动绑定功能无法工作

如果不想将代码转换为ES6类，只需将其更改为

render:function（）{..

即可

如果您将其转换为ES6类，请查看

方法遵循与常规ES6类相同的语义，这意味着 他们不会自动将此绑定到实例。您必须 显式使用.bind（this）或arrow函数=>

---

谢谢。参考网址也帮了我很大的忙！