React native 如何重构带有成员变量的组件以响应es6类

如何将带有成员变量的组件重构为es6类 它在没有状态变量的情况下工作。为什么在运行下面的代码时，我会看到一个红色的大屏幕，上面显示“无法添加属性计数器，对象不可扩展”

“严格使用”；
let Dimensions=require（'Dimensions'）；
让totalWidth=Dimensions.get（'window'）.width；
leftStartPoint=totalWidth*0.1；
让componentWidth=totalWidth*0.8；
进口反应{
评估学，
组成部分，
样式表，
文本，
文本输入，
看法
}从“反应本机”；
类登录扩展组件{
建造师（道具）{
超级（道具）；
这个计数器=23；
此.state={
InputNum:'
};        
}    
更新枚举（aEvent）{
this.setState（（状态）=>{
返回{
InputNum:aEvent.nativeEvent.text，
};
});
}  
按钮按下（）{
这个.counter++；
console.log（“：”+this.counter）；
}
render（）{
返回(
this.updateEnum（事件）}/>
按我。。。
);
}
}
让styles=StyleSheet.create({
容器：{
弹性：1，
背景颜色：“白色”，
},
numberInputStyle：{
前20名，
左：左起点，
宽度：组件宽度，
背景颜色：“灰色”，
尺寸：20
},      
bigTextPrompt：{
前70名，
左：左起点，
宽度：组件宽度，
背景颜色：“灰色”，
颜色：'白色'，
textAlign:'中心'，
尺寸：60
}
});
AppRegistry.registerComponent（'Project18'，（）=>Login）；

您需要在构造函数中设置值：

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

由于设置状态的方式，您可能会收到错误。尝试如下设置状态：

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

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

onPress函数的调用方式如下：

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

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

this.buttonPressed（）}>

我已经建立了一个完整的工作项目，还粘贴了下面的代码

“严格使用”；
进口反应{
评估学，
组成部分，
样式表，
文本，
文本输入，
看法
尺寸
}从“反应本机”；
让totalWidth=Dimensions.get（'window'）.width；
leftStartPoint=totalWidth*0.1；
让componentWidth=totalWidth*0.8；
类SampleApp扩展组件{
建造师（道具）{
超级（道具）；
这个计数器=23；
此.state={
InputNum:'
};        
}    
更新枚举（aEvent）{
这是我的国家({
InputNum:aEvent.nativeEvent.text，
})
}  
按钮按下（）{
这个.counter++；
console.log（“：”+this.counter）；
}
render（）{
返回(
this.updateEnum（事件）}/>
this.buttonPressed（）}>
按我。。。
);
}
}
让styles=StyleSheet.create({
容器：{
弹性：1，
背景颜色：“白色”，
},
numberInputStyle：{
前20名，
左：左起点，
宽度：组件宽度，
背景颜色：“灰色”，
尺寸：20，
宽度：200，
身高：50
},      
bigTextPrompt：{
前70名，
左：左起点，
宽度：组件宽度，
背景颜色：“灰色”，
颜色：'白色'，
textAlign:'中心'，
尺寸：60
}
});
AppRegistry.registerComponent（'SampleApp'，（）=>SampleApp）；

为什么不希望变量存储在状态中？据我所知，存储在状态中的变量与UI的呈现有关。如果我的变量与UI无关，我不希望存储在状态中，以防它导致不必要的渲染OK，我已经更新了答案以及示例项目。感谢您的帮助，我已经在这里更改了我的问题。请再复习一遍，我会非常感激的~