如何在退格键按下时删除 OTP 用户输入

Question

我编写了一个 OTP 组件，但它有两个我无法解决的问题。

第一个问题是，当我按退格键时，我想删除输入值，然后 go 到上一个输入字段以将其删除。

第二个问题是，当我删除一个输入（即第三个框）时，我的代码让我专注于下一个输入字段。

删除输入时，如何正确执行退格键和 go 到上一个输入字段？

这是我到目前为止所做的：

import React, { useState } from "react";
import css from '../components/css/OTP.css'
const Axios = require('axios')

const OTP = () => {
const [otp, setOtp] = useState(new Array(4).fill(""));

const handleChange = (element, index) => {
    if (isNaN(element.value)) return false;

    setOtp([...otp.map((d, idx) => (idx === index ? element.value : d))]);

    //Focus next input
    if (element.nextSibling) {
        element.nextSibling.focus();
    }
}

//eğer girilen OTP backendden gelen OTP ile aynıysa matchleştiğini göster ve kullanıcıyı verifike et daha sonra dashboarda aktar.

const checkOTP = async () =>{
try
{
    const url = "http://localhost:5000/auth/otp"
    const response = await Axios.post(url , {otp} , {withCredentials: true})

if(response.status!==200){
    alert("Invalid OTP entry") 
}
else{
    alert("OTP successful!")
}
}
catch(err)
{
console.log(err)
}
}

return (
    <>   
    <div className="otp-window">
        <div className="otp-modal"> 
        <div className="row">
            <div className="info">
                <p className="otp-info">Please enter the OTP sent to your email</p>
                
                {otp.map((data, index) => {
                    return (
                        <input
                            className="otp-field"
                            type="text"
                            name="otp"
                            maxLength="1"
                            key={index}
                            value={data}
                            onChange={e => handleChange(e.target, index)}
                            onFocus={e => e.target.select()}
                        />
                    );
                })}

                <p className="otp-entered">OTP : {otp.join("")}</p>
                <p>
                    <button
                        className="clear-button"
                        onClick={e => setOtp([...otp.map(v => "")])}
                    >
                        Clear
                    </button>
                    <button
                        className="verify-button"
                        onClick={e =>
                            alert("Entered OTP is " + otp.join(""))
                        }
                     onClick={checkOTP}>
                        Verify OTP
                    </button>
                </p>
            </div>
        </div>
        </div>  
    </div>  
    </>
);
};
export default OTP;

Answer 1

您可以使用input事件并像这样检查event object 的event.inputType属性。 不过，您可能必须将onChange道具更改为onInput 。

if (event.inputType === 'deleteContentBackward' && event.target.value === '') {
  // Focus on the previous field
}