如果用户使用react-native- otp -input输入错误的otp,如何重置输入的otp

如果我在点击verify按钮时收到任何错误消息,我想再次将我的代码重置为empty,但即使我的状态更改为empty,otpinputview组件仍然显示填充的不正确的旧otp。

 <OTPInputView
                    style={{ width: "80%", height: 40, marginTop: "25%" }}
                    pinCount={5}
                    selectionColor={"#E23744"}
                    codeInputFieldStyle={{
                      width: 30,
                      height: 45,
                      borderWidth: 0,
                      borderBottomWidth: 1,
                      borderBottomColor: "grey",
                    }}
                    codeInputHighlightStyle={{
                      borderBottomColor: "#E23744",
                      color: "#000",
                      borderBottomWidth: 1,
                      borderWidth: 0,
                    }}
                    codeInputFieldStyle={{
                      color: "#000",
                      borderBottomColor: "grey",
                      borderBottomWidth: 1,
                      borderWidth: 0,
                    }}
                    onCodeFilled={(code)=>onContinueHandlePress()}
                    autoFocusOnLoad
                  />
{errMsg != "" && (
                    <Text
                      style={{
                        fontSize: 14,
                        color: "red",
                        textAlign: "center",
                        marginTop: 30,
                      }}
                    >
                      {errMsg}
                    </Text>
                  )}
                  {verify === false ? (
                    <TouchableOpacity
                      disabled={code && code !== null ? false : true}
                      style={{
                        backgroundColor: "#E23744",
                        width: "100%",
                        height: 50,
                        alignItems: "center",
                        justifyContent: "center",
                        borderRadius: 5,
                        marginTop: 10,
                      }}
                      onPress={() =>
                        code && code !== null && onContinueHandlePress()
                      }
                    >
                      <Text style={{ color: "white", fontSize: 18 }}>
                        {translation.sl_verify_and_login}
                      </Text>
                    </TouchableOpacity>
                  ) : (
                    <ActivityIndicator
                      size="small"
                      color="#000"
                      style={{ marginTop: 10 }}
                    />
                  )}
                </View>

vefrify函数

const onContinueHandlePress = async () => {
    let mobile = await props.route.params.mobile;
    setverify(true);
    async function post() {
      try {
        const response = await API.postFormData(
          `/users/verify`,
          qs.stringify({ code, mobile, language })
        );
        setverify(false);
        if (response.status == 400) {
          setverify(false);
          setErrMsg(translation.sl_otp_error_message);
          setCode("");
        } else {
          setverify(false);
          const content = response.data.content;
          if (!isValidObject(content.user)) {
            setErrMsg(translation.sl_otp_login_error_message);
            setCode("");
            return;
          }
          // store user data start
          console.log("OtpScreen store - start");
          console.log("OtpScreen - response.data.content.user", content.user);
          if (isValidObject(content.user)) {
            // saveUserData(content.user, null);
            dispatch(setUserObject(content.user));
            CleverTap.onUserLogin({
              Name: content.user.name,
              Phone: content.user.phone,
              identity: content.user.id,
            });
          }
          if (content.user.id != null) {
          } else {
          }
        }
      } catch (e) {
        setverify(false);
        setErrMsg(translation.sl_otp_error_message);
        console.log(e);
        setErrMsg(translation.sl_otp_error_message);
        setCode("");
      }
    }
    post();
  };

所以你可以在我的oncontinuehandlepress()中看到,我已经提到,当我得到400或者当它转到catch块时,我设置了setcode(""),在安慰代码上,我得到了空,但在UI中,我仍然可以看到以前输入的数字。请帮助我在这里,任何线索将不胜感激。

转载请注明出处:http://www.nali5.com/article/20230512/2388550.html