如何使用成员变量将React组件重构为es6类
它没有状态变量.为什么在运行下面的代码时,我会得到一个大的红色屏幕“无法添加属性计数器,对象不可扩展”?
它没有状态变量.为什么在运行下面的代码时,我会得到一个大的红色屏幕“无法添加属性计数器,对象不可扩展”?
'use strict'; let Dimensions = require('Dimensions'); let totalWidth = Dimensions.get('window').width; let leftStartPoint = totalWidth * 0.1; let componentWidth = totalWidth * 0.8; import React,{ AppRegistry,Component,StyleSheet,Text,TextInput,View } from 'react-native'; class Login extends Component { constructor(props) { super(props); this.counter =23; this.state = { inputedNum: '' }; } updateNum(aEvent) { this.setState((state) => { return { inputedNum: aEvent.nativeEvent.text,}; }); } buttonPressed() { this.counter++; console.log(':::'+this.counter); } render() { return ( <View style={styles.container}> <TextInput style={styles.numberInputStyle} placeholder={'input phone number'} onChange={(event) => this.updateNum(event)}/> <Text style={styles.bigTextPrompt} onPress={this.buttonPressed}> Press me... </Text> </View> ); } } let styles = StyleSheet.create({ container: { flex: 1,backgroundColor: 'white',},numberInputStyle: { top: 20,left: leftStartPoint,width: componentWidth,backgroundColor: 'gray',fontSize: 20 },bigTextPrompt: { top: 70,color: 'white',textAlign: 'center',fontSize: 60 } }); AppRegistry.registerComponent('Project18',() => Login);
您需要在构造函数中设置值:
constructor(props) { super(props) this.counter = 23 }
由于状态的设置方式,您可能会收到错误.尝试设置这样的状态:
updateNum(aEvent) { this.setState({ inputedNum: aEvent.nativeEvent.text,}) }
并且应该像这样调用onPress函数:
<Text style={styles.bigTextPrompt} onPress={() => this.buttonPressed()}>
我已经设置了一个完整的工作项目here也粘贴了下面的代码.
https://rnplay.org/apps/Se8X5A
'use strict'; import React,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 ( <View style={styles.container}> <TextInput style={styles.numberInputStyle} placeholder={'input phone number'} onChange={(event) => this.updateNum(event)}/> <Text style={styles.bigTextPrompt} onPress={() => this.buttonPressed()}> Press me... </Text> </View> ); } } let styles = StyleSheet.create({ container: { flex: 1,numberInputStyle: { top: 20,fontSize: 20,width:200,height:50 },bigTextPrompt: { top: 70,fontSize: 60 } }); AppRegistry.registerComponent('SampleApp',() => SampleApp);
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。