React - Как перезаписать текущий символ внутри коробки ввода (OTP входы), когда он уже заполнен? ⇐ Javascript

[Anonymous]

Я пытаюсь создать окно ввода для ввода в стиле таймера/OTP. Полный? Придется вручную отступить и удалить символ, а затем вы можете пополнить ...
В настоящее время внутреннее входное поле (0), но, поскольку он уже заполнен, я не могу перезаписать его
import { useRef, useState } from 'react'

function App() {
const [time, setTime] = useState(null);
const [running, setRunning] = useState(false);
const [editState, setEditState] = useState(false);
const [hms, setHms] = useState(Array(6).fill(0));
const inputs = useRef([]);

const handleChange = (e, idx) => {
const {value} = e.target;
if (value.match(/^\d$/)) {
const newHms = [...hms];
newHms[idx] = value;
setHms(newHms);

if (idx < 6) {
inputs.current[idx+1].focus();
}

if (value === '') {
if (idx > 0) {
inputs.current[idx - 1].focus();
}
}
}
}

const handleKeyDown = (e, idx) => {
if (e.key === 'Backspace') {
if (hms[idx] != '') {
const newHms = [...hms];
newHms[idx] = '';
setHms(newHms);
return;
}

if (idx > 0) {
inputs.current[idx - 1].focus();
}
}
}
return (


{true &&
{
hms.map((_, idx) => {
return (

handleKeyDown(e, idx)}
onChange={(e) => handleChange(e, idx)}
ref={(el) => (inputs.current[idx] = el)}
style={{width: '40px',
height: '40px',
margin: '0 5px',
textAlign: 'center',
fontSize: '18px',
border: '1px solid #ccc',
borderRadius: '4px'}
}
>
{(idx == 1 || idx == 3) && :}

);
})
}
}

Hours : Minutes : Seconds



)
}
export default App


Подробнее здесь: https://stackoverflow.com/questions/794 ... nputs-when