Question

我正在尝试对按钮进行验证，但是每当我尝试触摸按钮时都会收到错误消息

我试图只在if语句上加上第二个条件，但是我遇到了同样的错误。当我重新加载项目并且没有输入值时，我会碰到按钮，但是我将值作为数字输入时，我会清除数字，然后我会碰到按钮，然后它才能正常工作。会导致正在运行的项目的初始状态出错。

屏幕的整个代码

import React from 'react';  
import {StyleSheet, View, TextInput, TouchableOpacity, Text, KeyboardAvoidingView, Alert, BackHandler} from 'react-native';  
import HandleBack from '../component/backHandler';

class BuyerLogin extends React.Component{

    constructor(props){
        super(props);
        this.state = {
            num : '',
        }
    }

    onBack = () => {
        Alert.alert(
            'Exit',
            'Do you want to exit?',
            [
              {text: 'No', onPress: () => console.log('Cancel Pressed'), style: 'cancel'},
              {text: 'Yes', onPress: () => BackHandler.exitApp()},
            ],
            { cancelable: false });
            return true;
    };

  onChanged(text){
        let newText = '';
        let numbers = '0123456789';

        for (var i=0; i < text.length; i++) {
            if(numbers.indexOf(text[i]) > -1 ) {
                newText = newText + text[i];
            }
            else {
                // your call back function
                alert("Please enter valid number");
            }
        }
        this.setState({ inputtxt: newText });
    }
    render(){
        return(
            <HandleBack onBack={this.onBack}>
            <View style={styles.outer}>
                <View style={styles.inner}>
                    <KeyboardAvoidingView style={styles.container}> 
                    <TextInput  style={styles.input}
                        ref='BuyerMobileNo'
                        placeholder="Enter your contact number"
                        placeholderTextColor="#939eaf"
                        maxLength={10}
                        textAlign="center"
                        keyboardType="phone-pad"
                        value={this.state.inputtxt}
                        onChangeText={(text)=> this.onChanged(text)}
                    />
                    <TouchableOpacity 
                        style={styles.buttonContainer} 
                        onPress={()=> {
                        if(this.state.inputtxt.length === 10)
                        { 
                                this.props.navigation.navigate('bVerify')
                        }
                        else
                        {
                                alert("Please enter 10 digit number");
                        }}
                    }>
                        <Text style={styles.buttonText}>
                            Get OTP
                        </Text>
                    </TouchableOpacity>
                    </KeyboardAvoidingView>
                </View>
            </View>
            </HandleBack>
        );
    }
}

export default BuyerLogin;

如果长度不能为0，并且只能为10位数字，我想验证inputText数据。请帮助我。

Answer 1

您必须初始化状态：

class YourClassName extends React.Component {
   state = {
     inputtxt = ''
   }
   // ...render etc
}

Answer 2

尝试此代码：

()=> {
   if(this.state.inputtxt.length == 10 )
   { 
        this.props.navigation.navigate('bVerify')
   }
   else
   {
        alert("Please enter 10 digit number");
   }
}

并将功能添加到您的组件中

constructor(props){
    super(props)
    this.state = { inputtxt:''}
}

未定义不是对象（正在评估'_this2.state.inputtxt.length'）

2 个答案: