OTP 未在 react-otp-input 中重置答案

【问题标题】：OTP not getting reset in react-otp-inputOTP 未在 react-otp-input 中重置
【发布时间】：2022-08-16 18:40:21
【问题描述】：

我将以下代码用于 otp，当我单击重新发送 Otp 时，otp 不会被清除。你能帮我解决我所缺少的吗？

我也提到了下面的工作代码，但它仍然不起作用。 https://github.com/devfolioco/react-otp-input/blob/main/src/demo/index.jsx

我已经尝试了很多，但仍然无法正常工作。

import Modal from \"react-bootstrap/Modal\";
import React, { Component, useReducer, useState } from \"react\";
import OtpInput from \'react-otp-input\';
import { render } from \'react-dom\';
import walletClientX from \"../../../utils/api/walletClientX\";
import { FormattedMessage } from \"react-intl\";

class VerifyOTP extends Component {

  constructor(props) {
    super(props);

    this.state = {
      otp: \'1\',
      numInputs: 6,
      separator: \'\',
      isDisabled: false,
      hasErrored: false,
      isInputNum: false,
      isInputSecure: false,
      minLength: 0,
      maxLength: 40,
      placeholder: \'\',
    };
  }

  
  handleOtpChange = (otp) => {
    const re = /^[0-9\\b]+$/;
      if (otp === \'\' || re.test(otp)) {
        this.setState({ otp });
      }
  };

  handleChange = (e) => {
    this.setState({ [e.target.name]: e.target.value });
  };

  handleNumInputsChange = (e) => {
    let numInputs = e.target.value;
    const { minLength, maxLength } = this.state;

    if (numInputs < minLength || numInputs > maxLength) {
      numInputs = 4;

      console.error(`Please enter a value between ${minLength} and ${maxLength}`);
    }

    this.setState({ [e.target.name]: parseInt(numInputs, 10) });
  };

  clearOtp = () => {
    this.setState({ otp: \'\' });
  };

  handleCheck = (e) => {
    const { name } = e.target;
    this.setState((prevState) => ({ [name]: !prevState[name] }));
  };

  handleSubmit = (e) => {
    e.preventDefault();
    alert(this.state.otp);
  };

  goBack = () => {
   
    this.props.onCloseVerifyOTPModal(false);
  };

  resendOtp = () => {
    
    this.clearOtp();
  };
  submitWithdrawRequest = () => {

    
    this.props.onVerifyOTP(this.state.otp);
  };


  render() {
    const {
      otp,
      numInputs,
      separator,
      isDisabled,
      hasErrored,
      isInputNum,
      isInputSecure,
      minLength,
      maxLength,
      placeholder,
    } = this.state;
    
    return (
      <Modal show onHide={this.props.onCloseVerifyOTPModal}>
        <Modal.Header closeButton className=\"border-0\">
          <Modal.Title>
            <strong>
              <FormattedMessage
                id=\"wallet.otp-verification\"
                defaultMessage=\"OTP Verification\"
              />
            </strong>
          </Modal.Title>

        </Modal.Header>
        <Modal.Body className=\"text-center font-proxima-nova\">
          <p className=\"text-center otp-text\"> Enter the OTP sent to registered mobile number.</p>

          <OtpInput 
            inputClassName=\"otpInput\"
            numInputs={numInputs}
            isDisabled={isDisabled}
            hasErrored={hasErrored}
            errorStyle=\"error\"
            onChange={this.handleOtpChange}
            separator={<span>{separator}</span>}
            isInputNum={isInputNum}
            isInputSecure={isInputSecure}
            shouldAutoFocus
            value={otp}
            placeholder={placeholder}
            inputStyle={{
              width: \"3rem\",
              height: \"3rem\",
              margin: \"0 1rem\",
              fontSize: \"2rem\",
              borderRadius: 0,
              borderWidth: 0,
              borderBottomColor: \'#203BCF\',
              borderBottomWidth: 1,
            }}
          />
          <p></p>
          <p className=\"text-center otp-text\">Didn’t receive the OTP ? &nbsp;
            <a href=\"#\" className=\"resendOtp\"
              onClick={this.resendOtp} >Resend OTP</a></p>


          <div className=\"row\">
            <div className=\"col\">
              <button
                type=\"button\"
                className=\"btn btn-primary home-btn mt-4\"
                onClick={this.submitWithdrawRequest}
              >
                <FormattedMessage
                  id=\"wallet.verify-submit\"
                  defaultMessage=\"VERIFY & SUBMIT\"
                />
              </button>

              <button
                type=\"button\"
                className=\"btn btn-primary home-btn mt-4\"
                onClick={this.goBack}
              >
                <FormattedMessage id=\"general.back\" defaultMessage=\"Back\" />
              </button>
            </div>


          </div>


        </Modal.Body>

      </Modal>
    );
  }
}
export default VerifyOTP;

标签： reactjs react-native

【解决方案1】：

请使用https://www.npmjs.com/package/react18-input-otp。该软件包将帮助您处理 otp 输入。

【讨论】：