反応でテキスト入力のフォーカスを変更する

ここでの私の目標は、フォームを作成することです。このフォームでは、リターンキーを押すと次の入力要素に移動し、最後の入力時にフォームを送信します。

これはモバイル向けに構築されており、ブラウザの「キーボードに移動」ボタンの代わりに「次へ」ボタンを使用するオプションがないため（これについて詳しくは、この回答を参照してください）。

これをよりよく視覚化するために、ここに写真があります：

コードも書いていますが、イベントを適切な場所でキャッチできないので、返品後すぐにフォームが送信されるか、イベントを防ぐと、ヒット後にフォーカスが変更されます。 2回返します。

こちらの例をご覧ください：https：//codepen.io/ofhouse/pen/Rgwzxy（以下のコードも貼り付けました）

class TextInput extends React.Component {
  constructor(props) {
    super(props);
    this._onKeyPress = this._onKeyPress.bind(this);
  }

  componentDidMount() {
    if (this.props.focus) {
      this.textInput.focus();
    }
  }

  componentDidUpdate(nextProps) {
    if (nextProps.focus) {
      this.textInput.focus();
    }
  }

  _onKeyPress(e) {
    if (e.key === 'Enter') {
      this.props.onSubmit(e);
    }
  }

  render() {
    return (
      <div>
        <input
          type="text"
          onKeyPress={this._onKeyPress}
          ref={input => {
            this.textInput = input;
          }}
        />
      </div>
    );
  }
}

class Application extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      currentElement: 0,
    };
  }

  _submitForm(e) {
    // If I remove this preventDefault it works, but also the form is submitted --> SiteReload
    e.preventDefault();
  }

  _changeFocus(nextElement) {
    return e => {
      this.setState({
        currentElement: nextElement,
      });
    };
  }

  render() {
    const { currentElement } = this.state;
    return (
      <form>

        <h1>React input focus</h1>

        <TextInput focus={currentElement === 0} onSubmit={this._changeFocus(1)} />
        <TextInput focus={currentElement === 1} onSubmit={this._changeFocus(0)} />

        <div>
          <button type="submit" onClick={this._submitForm}>Submit</button>
        </div>

      </form>
    );
  }
}

ReactDOM.render(<Application />, document.getElementById('app'));