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);
Perché non vuoi la variabile da memorizzare nello stato? –
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
Ok, ho aggiornato la risposta e il progetto di esempio. –