如何使用成员变量将组件反应重构为es6类

Question

如何使用成员变量将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,
        left: leftStartPoint,
        width: componentWidth,
        backgroundColor: 'gray',
        color: 'white',
        textAlign: 'center',
        fontSize: 60
      }
    });
AppRegistry.registerComponent('Project18', () => Login);

Answer 1

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

 constructor(props) {
   super(props)
   this.counter = 23
 }

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

updateNum(aEvent) {
  this.setState({
    inputedNum: aEvent.nativeEvent.text,
  })
}

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

<Text style={styles.bigTextPrompt} onPress={() => this.buttonPressed()}>

我在这里设置了一个完整的工作项目,也粘贴了下面的代码.

https://rnplay.org/apps/Se8X5A

'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 (
        <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,
    width:200,
    height:50
  },      
  bigTextPrompt: {
    top: 70,
    left: leftStartPoint,
    width: componentWidth,
    backgroundColor: 'gray',
    color: 'white',
    textAlign: 'center',
    fontSize: 60
  }
});

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