Переключить автофокус между двумя текстовыми полями

Question

В моем приложении «Реакция» у меня есть 10 текстовых полей с пользовательским интерфейсом. Первые 8 текстовых полей находятся внутри панели расширения, а последние два текстовых поля находятся внутри другой панели расширения. Мне нужно переключить автофокус между двумя последними, чтобы при вводе данных пользователем в первом, после нажатия «Ввод», следующее текстовое поле было автофокусированным, и наоборот, когда данные вводятся во втором текстовом поле, первый будет автофокусированным.

Это одно из текстовых полей:

                <TextField
                  autofocus={this.state.depotFocused}
                  id="standard-name"
                  value={this.state.depot}
                  defaultValue={this.state.depot}
                  onChange={ev => this.setState({ depot: ev.target.value })}
                  onKeyPress={ev => {
                        if (ev.key === "Enter") {
                          this.handleDepotChange();
                          ev.preventDefault();
                        }
                      }}
                  margin="normal"
                />

Моей первой реализацией было изменение состояния автофокуса при нажатии клавиш. Таким образом, когда пользователь нажимает «enter» и покидает первое текстовое поле, this.state.depotFocused становится false, а this.state.folderFocused становится true (это следующее текстовое поле). Проблема, как уже упоминали другие, заключается в том, что автофокус вообще не работает. Любая помощь будет высоко ценится.

Answer 1

Я создал пример того, как вручную переключать фокус текстовых полей:

import React, { PureComponent } from "react";
import { render } from "react-dom";
import TextField from "@material-ui/core/TextField";

class TextFields extends PureComponent {
  render() {
    return (
      <div style={{ display: "flex", flexDirection: "column" }}>
        <TextField
          autoFocus
          inputRef={node => {
            this.firstField = node;
          }}
          onKeyPress={ev => {
            if (ev.key === "Enter") {
              ev.preventDefault();
              this.secondField.focus();
            }
          }}
        />
        <TextField
          inputRef={node => {
            this.secondField = node;
          }}
          onKeyPress={ev => {
            if (ev.key === "Enter") {
              ev.preventDefault();
              this.firstField.focus();
            }
          }}
        />
      </div>
    );
  }
}

render(<TextFields />, document.querySelector("#root"));