Reaktif bileşenleri üye değişkeni ile es6 sınıflarına nasıl geri yükleriz?

Question

Refactor'u üye değişkeni ile bir üye değişkeni ile es6 sınıflarına dönüştürün Durum değişkeni olmadan çalışır. Neden, aşağıdaki kodu çalıştırırken, "Özellik sayacı eklenemiyor, nesne genişletilemez" ile büyük bir kırmızı ekran alabilir miyim?

'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

Sen yapıcısı değeri ayarlamanız gerekir: Sen çünkü devlet ayarlanırken yolu hataları alıyor olabilir

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

.

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

Ve onPress işlev böyle çağrılmalıdır: Böyle devlet ayarlamayı deneyin ben kurdum

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

tam çalışma projesi here da aşağıdaki kodu yapıştırılan.

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