Блог

Главная - Вопросы по программированию - как добавить состояние сброса, когда пользователь удаляет текст из текстовых вводов otp, используя React native otp input?

как добавить состояние сброса, когда пользователь удаляет текст из текстовых вводов otp, используя React native otp input?

#react-native #react-native-android #react-native-ios

#react-native #react-native-android #react-native-ios

Вопрос:

Я создал экран OTP, используя react-native-otp-input следующим образом: введите описание изображения здесь

когда я ввожу код, кнопка продолжения становится розовой, поскольку состояние кода устанавливается на значение, подобное следующему введите описание изображения здесь

но когда я пытаюсь очистить ввод кода, кнопка продолжения по-прежнему остается розовой, поскольку состояние кода не обновляется

введите описание изображения здесь

Мой код для просмотра ввода otp и кнопки продолжения выглядит следующим образом:

  <View style={{alignItems: 'center'}}>
              <OTPInputView
                style={{width: '90%', height: 40}}
                pinCount={5}
                codeInputFieldStyle={{
                  width: 30,
                  height: 45,
                  borderWidth: 0,
                  borderBottomWidth: 1,
                  borderBottomColor: '#808080',
                }}
                codeInputHighlightStyle={{
                  borderBottomColor: '#000',
                  color: '#000',
                  borderBottomWidth: 1,
                  borderWidth: 0,
                }}
                codeInputFieldStyle={{
                  color: '#000',
                  borderBottomColor: '#000',
                  borderBottomWidth: 1,
                  borderWidth: 0,
                }}
                onCodeFilled={(code) => {
                  setCode(code);
                }}
              />
            </View>
          </KeyboardAvoidingView>
          <View style={{alignItems: 'center', justifyContent: 'center'}}>
            {code == '' ? (
              <TouchableOpacity
                style={{
                  backgroundColor: '#C0C0C0',
                  width: 250,
                  height: 50,
                  alignItems: 'center',
                  justifyContent: 'center',
                  borderRadius: 20,
                  marginTop: '10%',
                }}
                disabled={true}>
                <Text style={{color: 'white', fontSize: 18}}>Continue</Text>
              </TouchableOpacity>
            ) : otpresponseLoading == true ? (
              <ActivityIndicator
                size="large"
                color="#FE017E"
                style={{marginTop: '10%'}}
              />
            ) : (
              <TouchableOpacity
                style={{
                  backgroundColor: '#FF1493',
                  width: 250,
                  height: 50,
                  alignItems: 'center',
                  justifyContent: 'center',
                  borderRadius: 20,
                  marginTop: '10%',
                }}
                onPress={() => onContinueHandlePress()}>
                <Text style={{color: 'white', fontSize: 18}}>Continue</Text>
              </TouchableOpacity>
            )}
          </View>

Может кто-нибудь, пожалуйста, дайте мне знать, как мне справиться с обратным нажатием в этой зависимости? и обновлять состояние кода, когда пользователь удаляет код?

Любая зацепка была бы отличной, дайте мне знать, если потребуется что-нибудь еще для лучшего понимания, заранее благодарю.

Комментарии:

1. Проверяли ли вы это code значение во время удаления?

Ответ №1:

давайте попробуем :

 <KeyboardAvoidingView>
        <View style={{ alignItems: 'center' }}>
          <OTPInputView
            style={{ width: '90%', height: 40 }}
            pinCount={5}
            codeInputFieldStyle={{
              width: 30,
              height: 45,
              borderWidth: 0,
              borderBottomWidth: 1,
              borderBottomColor: '#808080',
            }}
            codeInputHighlightStyle={{
              borderBottomColor: '#000',
              color: '#000',
              borderBottomWidth: 1,
              borderWidth: 0,
            }}
            codeInputFieldStyle={{
              color: '#000',
              borderBottomColor: '#000',
              borderBottomWidth: 1,
              borderWidth: 0,
            }}
            onCodeChanged={(code) => {
              setCode(code);
            }}
          />
        </View>
      </KeyboardAvoidingView>
      <View style={{ alignItems: 'center', justifyContent: 'center' }}>
        {code.length !== 5 ? (
          <TouchableOpacity
            style={{
              backgroundColor: '#C0C0C0',
              width: 250,
              height: 50,
              alignItems: 'center',
              justifyContent: 'center',
              borderRadius: 20,
              marginTop: '10%',
            }}
            disabled={true}>
            <Text style={{ color: 'white', fontSize: 18 }}>Continue</Text>
          </TouchableOpacity>
        ) : otpresponseLoading == true ? (
          <ActivityIndicator
            size="large"
            color="#FE017E"
            style={{ marginTop: '10%' }}
          />
        ) : (
              <TouchableOpacity
                style={{
                  backgroundColor: '#FF1493',
                  width: 250,
                  height: 50,
                  alignItems: 'center',
                  justifyContent: 'center',
                  borderRadius: 20,
                  marginTop: '10%',
                }}
                onPress={() => onContinueHandlePress()}>
                <Text style={{ color: 'white', fontSize: 18 }}>Continue</Text>
              </TouchableOpacity>
            )}
      </View>
Метки: