native prompt react_react-native – 如何使用成员变量将响应组件重构为es6类

您需要在构造函数中设置值：

constructor(props) {

super(props)

this.counter = 23

}

由于状态的设置方式,您可能会收到错误.尝试设置这样的状态：

updateNum(aEvent) {

this.setState({

inputedNum: aEvent.nativeEvent.text,

})

}

并且应该像这样调用onPress函数：

this.buttonPressed()}>

我已经设置了一个完整的工作项目here也粘贴了下面的代码.

'use strict';

import React, {

AppRegistry,

Component,

StyleSheet,

Text,

TextInput,

View,

Dimensions

} from 'react-native';

let totalWidth = Dimensions.get('window').width;

let leftStartPoint = totalWidth * 0.1;

let componentWidth = totalWidth * 0.8;

class SampleApp extends Component {

constructor(props) {

super(props);

this.counter =23;

this.state = {

inputedNum: ''

};

}

updateNum(aEvent) {

this.setState({

inputedNum: aEvent.nativeEvent.text,

})

}

buttonPressed() {

this.counter++;

console.log(':::'+this.counter);

}

render() {

return (

placeholder={'input phone number'}

onChange={(event) => this.updateNum(event)}/>

onPress={() => this.buttonPressed()}>

Press me...

);

}

}

let styles = StyleSheet.create({

container: {

flex: 1,

backgroundColor: 'white',

},

numberInputStyle: {

top: 20,

left: leftStartPoint,

width: componentWidth,

backgroundColor: 'gray',

fontSize: 20,

width:200,

height:50

},

bigTextPrompt: {

top: 70,

left: leftStartPoint,

width: componentWidth,

backgroundColor: 'gray',

color: 'white',

textAlign: 'center',

fontSize: 60

}

});

AppRegistry.registerComponent('SampleApp', () => SampleApp);