如何在React中实现输入自动制表符(关注keyup事件上的下一个输入元素)？

import React, { Component } from 'react';

class MyForm extends Component {
  constructor(props) {
    super(props);
    this.state = {
      inputs: [], // 存储输入元素的引用
      activeIndex: 0 // 当前活动的输入元素索引
    };
  }

  focusNextInput() {
    const { inputs, activeIndex } = this.state;
    const nextIndex = activeIndex + 1;

    if (nextIndex < inputs.length) {
      inputs[nextIndex].focus(); // 设置焦点到下一个输入元素
      this.setState({ activeIndex: nextIndex });
    } else {
      inputs[0].focus(); // 设置焦点回第一个输入元素
      this.setState({ activeIndex: 0 });
    }
  }

  render() {
    const { inputs } = this.state;

    return (
      <div>
        <input ref={input => inputs.push(input)} onKeyUp={e => e.keyCode === 9 && (e.preventDefault(), this.focusNextInput())} />
        <input ref={input => inputs.push(input)} onKeyUp={e => e.keyCode === 9 && (e.preventDefault(), this.focusNextInput())} />
        <input ref={input => inputs.push(input)} onKeyUp={e => e.keyCode === 9 && (e.preventDefault(), this.focusNextInput())} />
        {/* 其他输入元素 */}
      </div>
    );
  }
}

export default MyForm;