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>

是否可以设置控件的Tab键顺序？

Answer 1

您可能要使用html属性tabindex。这使您可以指定制表符将通过的顺序。您可以详细了解here，下面我举了一个小例子，将按钮的标签索引设置为＃1


<StepContent>
  <Typography>{this.stepContent[index]}</Typography>
  {this.stepAction[index]}
  <Grid container direction="row" className="m-t-26">
    <Button
      tabIndex="1" // This will make the button the first tab index for the form. 
      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>;

Answer 2

您可以使用tabIndex属性进行控制，但是最好弄清楚如何使元素按希望焦点出现的顺序出现在源代码中。

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

何时使用正的tabindex值

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

显式控制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);

Material UI控件的影响选项卡顺序

2 个答案: