2016-01-18 25 views
5

Come posso refactoring Reagire componenti con una variabile membro a es6 classi Funziona senza variabile di stato. Perché, quando eseguo il codice qui sotto, ottengo una grande schermata rossa con "Impossibile aggiungere un contatore di proprietà, l'oggetto non è estensibile"?Come refactoring reagire componenti con variabile membro a classi 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); 
+0

Perché non vuoi la variabile da memorizzare nello stato? –

+0

A mio avviso, la variabile memorizzata nello stato ha qualcosa a che fare con il rendering dell'interfaccia utente. Se la mia variabile non ha nulla a che fare con l'interfaccia utente, non voglio essere archiviata nello stato nel caso in cui causi rendering inutilmente – tennist

+0

Ok, ho aggiornato la risposta e il progetto di esempio. –

risposta

7

è necessario impostare il valore nel costruttore:

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

Si può essere ricevendo gli errori a causa del modo in cui lo stato è stato impostato. Prova a impostare lo stato in questo modo:

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

E la funzione onPress dovrebbe essere chiamata in questo modo:

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

Ho creato un progetto di lavoro completo here anche incollato il codice qui sotto.

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

Grazie per il vostro aiuto, ho già cambiato la mia domanda qui. Plz ripassa ancora e lo apprezzerò profondamente! ~ – tennist

+0

Nessun problema. Ho aggiornato il codice e l'esempio. –

Problemi correlati