Jak refaktoryzować komponenty ze zmienną składową na klasy es6

Question

Jak mogę refakturować Reagować składnikami ze zmienną składową na klasy es6 Działa bez zmiennej stanu. Dlaczego, uruchamiając poniższy kod, pojawia się duży czerwony ekran z napisem "Nie można dodać licznika właściwości, obiekt nie jest rozszerzalny"?

'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

Musisz ustawić wartość w konstruktorze:

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

Możesz otrzymywać błędy ze względu na sposób stan jest ustawiony. Spróbuj ustawić stan tak:

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

a funkcja onPress powinna nazywać tak:

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

Wcześniej skonfigurować pełny projekt roboczy here wklejane również poniższy kod.

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