React Native pin码锁定屏幕创建.useState错误

Question

我正在尝试创建一个带有数字的移动锁屏幕给用户输入pin码。当用户按下数字按钮时，值应该输入到我创建的数组中。当输入数字时，样式属性将被更改。

代码

import React from "react";
import { Alert, StyleSheet, Text, Touchable, TouchableHighlight, TouchableOpacity,useState, View } from "react-native";
import Loading from './Loading';
const Buttons = () => {
this.state = {
passcode: ['','','','']
}
_presControl = num =>{
let tempCode = this.state.passcode;
for(var i = 0; i<tempCode.length;i++){
if(tempCode[i] == ''){
tempCode[i] = num;
break;
}else{
continue;
}
}
this.setState({passcode:tempCode});
};
let nopad = [
{id:1},
{id:2},
{id:3},
{id:4},
{id:5},
{id:6},
{id:7},
{id:8},
{id:9},
{id:0}
]; 
return(
<View >
<View style={styles.boxcontaner} >
{this.state.passcode.map(p =>{
let style= p !=''? styles.box2:styles.box1;
return  <View style={style}></View>
})}       
</View>
<View style={styles.noBox}>
{nopad.map(num =>{
return(
<TouchableOpacity style={styles.box}
key={num.id}
onPress={this._presControl(num.id)} >
<Text style={styles.title}>{num.id}</Text>
</TouchableOpacity>
);
})}             
</View>
</View>
);
}
const styles = StyleSheet.create({
box1: {
width:13,
height:13,
borderRadius:13,
borderWidth:1,
borderColor:'gray'
},
box2: {
width:13,
height:13,
borderRadius:13,
borderWidth:1,
borderColor:'gray',
backgroundColor:'red'
},
box: {
width:70,
height:70,
borderRadius:70,
borderWidth:1,
borderColor:'#F2F3F4',
alignItems:'center',
backgroundColor:'#F2F3F4',
justifyContent:'center',
alignItems:'center'
},
boxcontaner:{
flexDirection:'row',
alignItems:'center',
justifyContent:'space-between',
marginLeft:40,
marginRight:40,
marginTop:10,
},
noBox:{
alignItems:'center',
justifyContent:'center',
marginTop:100,
flexDirection:'row',
flexWrap:'wrap',
marginLeft:20,
width:270,
height:200,
}
});
export default Buttons;

但是当我运行代码时，它显示

_this._presControl is not a function. (In '_this._presControl(num.id)', '_this._presControl' is undefined)

错误是什么?请问如何解决这个问题?

Answer 1

您需要创建数组的副本，以便在用户输入pin时更新状态。

_presControl = num =>{
let tempCode = this.state.passcode;
for(var i = 0; i<tempCode.length;i++){
if(tempCode[i] == ''){
tempCode[i] = num;
break;
}else{
continue;
}
}
var newPinCode = [...tempCode];
this.setState(newPinCode);
};

Answer 2

不能在功能组件的主体内使用类方法。相反，你应该这样调用你的函数:

<TouchableOpacity 
style={styles.box}
key={num.id}
onPress={()=>_presControl(num.id)} >
<Text style={styles.title}>{num.id}</Text>
</TouchableOpacity>