当用户使用 React 本机 otp 输入从 otp 文本输入中删除文本时如何添加重置状态？

Question

我使用 react-native-otp-input 创建了一个 OTP 屏幕，如下所示：

当我输入代码时，继续按钮变为粉红色，因为代码状态设置为如下所示的值

但是当我尝试清空代码输入时，继续按钮仍然是粉红色的，因为代码状态没有刷新

我的 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>

任何人都可以告诉我如何处理这种依赖关系中的后压吗？并在用户删除代码时刷新代码状态？

任何线索都很好，如果需要任何其他信息以更好地理解，请告诉我提前谢谢你。

Answer 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>

当用户使用 React 本机 otp 输入从 otp 文本输入中删除文本时如何添加重置状态？

how to add a reset state when user deletes text from otp text inputs using React native otp input?

react-native

react-native-android

react-native-ios