如何使用成員變量對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()}> 

我已經建立了一個完整的工作項目here也粘貼下面的代碼。

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);