javascript - 具有表格的材料 UI 对话垂直更改 tabindex

Question

我有一个material UI对话，其中有一张桌子。

<Dialog
      open={open}
      onClose={handleClose}
      maxWidth={'xl'}
      aria-labelledby='scroll-dialog-title'
      aria-describedby='scroll-dialog-description'
      disableBackdropClick
      className={css.root}>
      <IconButton className={css.closeButton} aria-label='close' onClick={handleClose}>
        <CloseIcon />
      </IconButton>
{data?.isdata ? (
 <div className={css.tableWrapper}>
            <Table aria-label='simple table'>
              <TableHead> // Here there is a render for table header</TableHead> <TableBody>
                {rows.map((row, index) => (
                  <TableRow key={index}>
                    {row.data.map((item, index) => (
                      <TableCell></TableCell><InputBase></InputBase></Table></div>) : null }
</Dialog 

现在，在这里我现在可以说 5 到 6 个输入框，我正在尝试，如果用户按下制表符，那么它应该垂直而不是水平发生。

那么，我怎样才能做到这一点。

标签： javascriptcssreactjsmaterial-ui

Answer 1

只需使用 tabindex 并根据表格的行索引计算它，这里是一个当你点击 tab 时穿过第一列的例子（开始之前，将输入集中在第一列）

const domContainer = document.querySelector('#root')

const e = React.createElement;

function Field ({ tabIndex = 0 }) {
  return e( 'input', { tabIndex })
}

function Row ({ tabIndex }) {
  return e('tr', {}, [ e(Field, { tabIndex }), e(Field) ])
}

function Table () {
  const rows = []
  for (let i = 0; i < 10; i++) {
    rows.push(e(Row, { tabIndex: i + 1 }))
  }

  return e('table', {}, rows)
}

ReactDOM.render(e(Table), domContainer)

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="root"></div>