React Native 密码锁屏创建。使用状态错误答案

【问题标题】：React Native pincode lock screen create. useState errorReact Native 密码锁屏创建。使用状态错误
【发布时间】：2021-10-10 11:05:27
【问题描述】：

我正在尝试创建一个带有数字的移动锁定屏幕，供用户输入密码。当用户按下数字按钮时，应该将值输入到我创建的数组中。输入数字后，样式属性会发生变化。

这里是代码

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)

什么是错误。请问这个怎么解决？

【问题讨论】：

标签： reactjs react-native use-state

【解决方案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);
};

【讨论】：

【解决方案2】：

您不能在功能组件的主体内使用类方法。相反，您应该这样称呼您：

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

【讨论】：