reactjs - 影响 Material UI 控件的 Tab 键顺序

Question

我有一个使用 React 和 Material UI 构建的应用程序。在一个 View 中可以有多个文本字段和多个按钮。现在，当我将焦点放在一个文本字段上然后按 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/

When to use a positive tabindex value

There is almost no reason to ever use a positive value to tabindex, and it is actually considered an anti-pattern. If you’re finding the need to use this value to change the order in which elements become focusable, it is likely that what you actually need to do is change the source order of the HTML elements.

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

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

但是，如果您决定明确指定 tabindex 是您的最佳选择，这里有一个示例说明如何为 TextField 执行此操作。和 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);