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

发布时间：2020-12-15 20:41:52 所属栏目：百科来源：网络整理

导读：如何使用成员变量将React组件重构为es6类它没有状态变量.为什么在运行下面的代码时,我会得到一个大的红色屏幕“无法添加属性计数器,对象不可扩展”？ 'use strict';let Dimensions = require('Dimensions');let totalWidth = Dimensions.get('window').widt

如何使用成员变量将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);

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!