在具有多个输入的原生react中处理焦点

class InputComponent extends React.Component {
  inputRef = React.createRef();

  componentDidMount() {
    this.inputRef.current.focus();
  }

  render() {
    return <input ref={this.inputRef} />;
  }
}

class MultiInputComponent extends React.Component {
  inputRefs = [
    React.createRef(),
    React.createRef(),
    React.createRef()
  ];

  handleKeyDown = (index, event) => {
    if (event.key === 'Enter') {
      event.preventDefault();
      if (index < this.inputRefs.length - 1) {
        this.inputRefs[index + 1].current.focus();
      }
    }
  };

  render() {
    return (
      <div>
        <input
          ref={this.inputRefs[0]}
          onKeyDown={event => this.handleKeyDown(0, event)}
        />
        <input
          ref={this.inputRefs[1]}
          onKeyDown={event => this.handleKeyDown(1, event)}
        />
        <input
          ref={this.inputRefs[2]}
          onKeyDown={event => this.handleKeyDown(2, event)}
        />
      </div>
    );
  }
}