我的反应本机组件,我通过创建React.createClass
,似乎没有约束力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