在两个文本字段之间切换自动对焦

Question

在我的 react app 我有 10 个 material-UI textfields。前 8 个文本字段位于扩展面板内，后两个文本字段位于另一个扩展面板内。我需要的是 在最后两个之间切换 自动对焦，这样当用户在第一个输入数据时，在他点击 'enter' 之后，下一个文本字段将自动对焦，反之亦然相反，当在第二个文本字段中输入数据时，第一个文本字段将自动对焦。

这是文本字段之一：

                <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 变为假并且 this.state.folderFocused 变为真（即下一个文本字段）。正如其他人所提到的，问题是自动对焦根本无法像这样工作。任何帮助将不胜感激。

Answer 1

我创建了一个关于如何手动切换 TextFields 焦点的示例：

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"));

在两个文本字段之间切换自动对焦

Toggle autofocus between two Textfields

javascript

autofocus

reactjs

material-ui