Javascript 如何处理onChange并将重点转向new<；字段>；？

我正在使用Formik（使用

with Formik（）

），并希望在用户键入时检查

——在其中包含4个字符后，我希望将重点放在下一个字段上，这样他们就可以继续键入而不必移动到下一个字段

因此，我的内心世界有：

<Field
  type="text"
  name="credit1"
  inputmode="numeric"
  maxlength="4" />
<Field
  type="text"
  name="credit2"
  inputmode="numeric"
  maxlength="4" />

我的

formikinerformcontainer=withFormik（…）

有一个验证模式

如果第一个字段中有4个字符，如何捕捉第一个字段的更改并将焦点移到第二个字段

---

我试图覆盖

onChange

，但不知道如何用用户键入的每个字符更新字段内容。

在vanilla javascript中，您可以这样做：

document.querySelectorAll('input').forEach(function(input) {
  input.addEventListener('keyup', function() {
    if(input.value.length >= input.getAttribute('maxlength'))
      input.nextElementSibling.focus();
  });
})

---

您可以在Formik中使用这样的方法

focusChange（e）{
如果（e.target.value.length>=e.target.getAttribute（“maxlength”））{
e、 target.nextElementSibling.focus（）；
}
...
//示例实现
从“React”导入React；
从“Formik”导入{Formik}；
导出默认类Basic.Component{
建造师（道具）{
超级（道具）；
this.inputRef=React.createRef（）；
this.focusChange=this.focusChange.bind（this）；
}
焦点更改（e）{
如果（e.target.value.length>=e.target.getAttribute（“maxlength”））{
e、 target.nextElementSibling.focus（）；
}
}
render（）{
返回(
我的表格
{
设置超时（（）=>{
警报（JSON.stringify（值，null，2））；
动作。设置提交（错误）；
}, 1000);
}}
render={props=>(
this.focusChange（e）}
/>
提交
)}
/>
);
}
}

使用Formik，表单输入是不受控制的组件，因此您可能必须使用JS来检测更改。太简单了！谢谢-为4个同级输入元素工作，现在我必须弄清楚如何到达下2个非同级输入元素。要到达非同级输入元素，我刚才使用了：document.getElementById（“id_需要_焦点”）.focus（）；谢谢-如果它需要移动到另一个不是同级的输入元素，有什么方法可以做到吗？要访问我刚才使用的非同级元素：document.getElementById（“id_needing_focus”）.focus（）；