时间戳

首页 > 解决方案 > 如果用户使用 react-native-otp-input 输入不正确的 otp，如何重置输入的 otp

reactjs - 如果用户使用 react-native-otp-input 输入不正确的 otp，如何重置输入的 otp

问题描述

如果我在点击验证按钮时收到任何错误消息，我想再次将我的代码重置为空，但即使我的状态变为空，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>

验证函数

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 中我仍然可以看到旧的输入的数字。请在这里帮助我，任何线索将不胜感激。

标签： reactjsreact-nativereact-native-androidreact-native-ios

解决方案

这是适合您的解决方案

 const [clearInput, setclearInput] = useState(false)
 const [code, setCode] = useState()

 <OTPInputView
    code={code}
    onCodeChanged={(code)=>{setCode(code);
                    setclearInput(false)}} 
    clearInputs={clearInput}
    onCodeFilled={(code)=>onContinueHandlePress()}
 .../>

下一步

const onContinueHandlePress = async () => {
...
...
if (!isValidObject(content.user)) {
        setErrMsg(translation.sl_otp_login_error_message);
        setCode("");
        setclearInput(true)
        return;
      }
....
....
}

希望它能如你所愿

推荐阅读