Javascript 聚焦pin数字组件的下一个或上一个字段

我创建了一个用于显示和写入卡片pin码的组件。以下是我创建的组件的屏幕截图：

我的代码在这里：

const pinDigitBuilder = () => {
  const arr = Array(...Array(8));
  return arr.map((x, i) => (
    <Field
      key={`${PIN_DIGIT}${i + 1}`}
      id={`${PIN_DIGIT}${i + 1}`}
      name={`${PIN_DIGIT}${i + 1}`}
      component={InputTextField}
      className="text xxs2"
      classNameInvalid="text xxs2 error"
      type="text"
      divClassName="fieldWrap"
      maxLength={1}
      validate={requiredInputField}
      normalize={keepNumbersOnly}
      errorStyle={{ display: 'none' }}
      autoComplete="off"
    />
  ));
};

constpindigitbuilder=（）=>{
常量arr=数组（…数组（8））；
返回arr.map（（x，i）=>(
));
};

其中InputExtField是“输入”的组件。我的问题是，当我在第一个字段中输入数字时，第二个字段自动对焦，第二个字段输入数字时，第三个字段自动对焦，等等，我都找不到方向。因为我是javascript的初学者，你知道如何实现这一点吗

---

感谢和问候

请不要再提出这一要求。只需显示一个文本字段，并让用户输入。90%的“将数字放在单独的框中”用户界面无法正确处理退格、粘贴等操作。他们在手机上很痛苦。只需一个带有输入后验证（客户端和服务器端）的简单字段即可。