使用react-native-otp-input输入错误OTP后如何重置输入框内容

问题根源 #

你维护的code状态没有和OTPInputView组件绑定，该组件默认内部独立维护输入值，因此你修改外部code状态不会同步到UI上。

解决步骤 #

1. 绑定受控属性（推荐）

修改OTPInputView的相关属性，将外部状态和组件关联：

// 补充onTextChange回调，用户输入过程中实时同步状态
// 补充code属性，将外部状态传入组件
// 完善onCodeFilled逻辑，先更新状态再执行后续操作
<OTPInputView
    style={{ width: "80%", height: 40, marginTop: "25%" }}
    pinCount={5}
    selectionColor={"#E23744"}
    code={code} // 新增：绑定你维护的code状态
    onTextChange={text => setCode(text)} // 新增：输入过程中实时更新状态
    codeInputFieldStyle={{
      width: 30,
      height: 45,
      borderWidth: 0,
      borderBottomWidth: 1,
      borderBottomColor: "grey",
      color: "#000"
    }}
    codeInputHighlightStyle={{
      borderBottomColor: "#E23744",
      color: "#000",
      borderBottomWidth: 1,
      borderWidth: 0,
    }}
    onCodeFilled={(filledCode) => {
      setCode(filledCode) // 新增：填完所有位数时更新状态
      onContinueHandlePress()
    }}
    autoFocusOnLoad
/>

修改后你调用setCode("")时，组件会自动响应状态变化清空输入内容。

2. 若绑定属性无效，使用ref强制清空

如果你用的第三方OTPInputView组件提供了清空实例方法，可以通过ref直接调用重置：

// 第一步：创建ref
const otpInputRef = useRef(null)

// 第二步：给组件绑定ref
<OTPInputView
  ref={otpInputRef}
  // 其他属性不变
/>

// 第三步：需要清空的位置同时调用组件的clear方法
setCode("")
otpInputRef.current?.clear()

额外提示 #

你当前代码中codeInputFieldStyle重复定义了两次，后者会覆盖前者的样式，可合并冗余定义避免样式异常。

内容的提问来源于stack exchange，提问作者TRINA CHAUDHURI