影响 Material UI 控件的 Tab 键顺序

Question

我有一个使用 React 和 Material UI 构建的应用程序。在一个视图中可以有多个文本字段和多个按钮。现在，当我将焦点放在一个文本字段上然后按下时，Tab我无法可靠地预测哪个控件将成为下一个获得焦点的控件。我想首先浏览所有文本字段，然后再浏览所有按钮。

<DialogContent>
    <DialogContentText>
        The username and password that were used are incorrect. Please provide the correct credentials in order to login to the API.
        <Stepper activeStep={this.state.credentialsStep} orientation='vertical'>
            {
                this.steps.map((label, index) => (
                    <Step key={label}>
                        <StepLabel>{label}</StepLabel>
                        <StepContent>
                            <Typography>{this.stepContent[index]}</Typography>
                            {this.stepAction[index]}
                            <Grid container direction='row' className='m-t-26'>
                                <Button color='primary'
                                        onClick={() => {
                                    this.state.credentialsStep === 0 ? this.onClickCancel() : this.onClickBack();
                                }}>
                                    {this.state.credentialsStep === 0 ? 'Cancel' : 'Back'}
                                </Button>
                                <Button variant='contained'
                                        color='primary'
                                        onClick={() => {
                                    this.state.credentialsStep === this.steps.length - 1 ? this.onClickLogin() : this.onClickNext();
                                }}>
                                    {this.state.credentialsStep === this.steps.length - 1 ? 'Login' : 'Next'}
                                </Button>
                            </Grid>
                        </StepContent>
                    </Step>
                ))
            }
        </Stepper>
    </DialogContentText>
</DialogContent>

有没有办法设置控件的选项卡顺序？

Answer 1

您可以使用tabIndex属性来控制它，但最好弄清楚如何让元素按照您希望焦点移动的顺序出现在源中。

我发现这个资源很方便：https : //bitsofco.de/how-and-when-to-use-the-tabindex-attribute/

何时使用正 tabindex 值

几乎没有理由对 tabindex 使用正值，它实际上被认为是一种反模式。如果您发现需要使用此值来更改元素变得可聚焦的顺序，那么您实际上需要做的很可能是更改 HTML 元素的源顺序。

显式控制 tabindex 顺序的问题之一是，任何具有正值的元素都将出现在您尚未明确放置 tabindex 的任何其他可聚焦元素之前。这意味着，如果您错过了想要在混合中使用的任何元素，则最终可能会出现非常混乱的焦点顺序。

如果您想让右侧的按钮在焦点顺序中位于左侧的按钮之前，则有多种 CSS 选项可以让右侧的按钮在源顺序中排在最前面。

但是，如果您决定明确指定 tabindex 是您的最佳选择，这里是一个示例，显示如何为TextFieldand执行此操作Button：

import React from "react";
import ReactDOM from "react-dom";

import TextField from "@material-ui/core/TextField";
import Button from "@material-ui/core/Button";

function App() {
  return (
    <div className="App">
      <TextField label="1" inputProps={{ tabIndex: "1" }} />
      <br />
      <TextField label="3" inputProps={{ tabIndex: "3" }} />
      <br />
      <TextField label="2" inputProps={{ tabIndex: "2" }} />
      <br />
      <Button tabIndex="5">Button 5</Button>
      <Button tabIndex="4">Button 4</Button>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);