将焦点切换到React中的下一个输入字段

Question

在我的react应用程序中，有一个部分需要输入验证码。它看起来是这样的：在此处输入图像描述

我希望焦点在输入下一个数字时自动切换到下一个位数输入字段。现在我正在使用DOM操作，但我想找到一个更强大的解决方案。

我现在的代码：https://codesandbox.io/s/fast-shadow-vqojs2?file=/src/App.js

我看到了使用参考来解决问题的选项。但在我看来，增加5个参考也不是很好。请告知

Answer 1

ref是的解决方案

沙箱

声明参考号：

const itemsRef = useRef([]);

添加输入的参考

<input
ref={(ref) => itemsRef.current.push(ref)}
name={`code-${index}`}
key={index}
style={{ width: "20px", height: "20px" }}
onChange={(event) => codeChangeHandler(event)}
maxLength={1}
/>

焦点下一个参考：

itemsRef.current[fieldIntIndex + 1].focus();

Answer 2

对于您的情况，如果inputs是兄弟，您可以很容易地检查当前输入是否有nextElementSibling，如果是，则关注它，如果不是(列表中的最后一个输入(，则模糊

const codeChangeHandler = (event) => {
const element = event.target;
const nextSibling = element.nextElementSibling;
nextSibling ? nextSibling.focus() : element.blur();
};

这是的一个工作示例