React Material UI - DataGrid 不断从输入字段中窃取焦点

Question

我正在使用 Material-UI 创建一个 React web 应用程序，我遇到了一个问题，即我的 Material-UI DataGrid 总是将浏览器焦点从我的搜索输入字段中窃取，因为我尝试在它的搜索输入字段中键入它。 加载页面时不会出现此问题。 仅当我首先单击表格上的某个位置以专注于它，然后单击搜索栏并尝试输入内容时才会发生这种情况。 就在我输入第一个字母并且我的页面的 state 更新时，焦点转到我表格上的一个单元格，所以我不能再在我的搜索框中输入而不再次单击它（然后该过程重复每个字母我类型）。

根据我的研究，很多人遇到了这个问题，因为他们没有在他们的 React 元素上放置正确的键，所以每当页面的 state 更改时，他们就会失去对输入字段的关注。 但是，我确保在所有具有兄弟元素的元素上都包含键，根据我的理解，这应该会解决这个问题。 我还在 InputBase 字段中添加了以下行：onKeyDown={(e) => e.stopPropagation()} 因为我在另一个 Stack Overflow 帖子上读到，有时 DataGrid 可以拦截 KeyDown 事件，但这也无济于事。

使问题更清晰的片段（在表格左上方放大 + 搜索栏）

这是包含我的问题的所有 JavaScript 代码：

<Paper key="paperGrid">
    <Grid key="contentGrid" container style={{paddingTop: 4, paddingBottom: 8}}>
        <Grid key="searchGrid" item xs={4}>
            <Paper key="searchPaper" component="form" className={classes.root}>
                <InputBase
                    key="searchInput"
                    className={classes.input}
                    placeholder="Search Job Configs..."
                    inputProps={{ 'aria-label': 'Search Job Configs' }}
                    onChange={searchJobs}
                    onKeyDown={(e) => e.stopPropagation()}
                />
                <IconButton key="searchButton" className={classes.iconButton} aria-label="search">
                    <SearchIcon />
                </IconButton>
            </Paper>
        </Grid>
        <Grid key="testing" item xs={2}>
            <h3>Testing</h3>
        </Grid>
    </Grid>

    <div key="dataGrid" style={{ height: '40vw', width: '80vw' }}>
        <DataGrid
            key="jobConfigsTable"
            rows={filterJobList} 
            columns={jobColumns} 
            pageSize={25} 
            rowsPerPageOptions={[25, 50, 100]}
            getRowId={(row) => row.psrunId}
            checkboxSelection 
        />
    </div>
</Paper>

Answer 1

尝试在您的<inputBase />中使用onSubmit而不是onChange ，如下所示：

<InputBase
    key="searchInput"
    className={classes.input}
    placeholder="Search Job Configs..."
    inputProps={{ 'aria-label': 'Search Job Configs' }}
    onSubmit={searchJobs}
    onKeyDown={(e) => e.stopPropagation()}
/>

每次输入更改时， onChange触发searchJobs 。 将其更改为onSubmit应该会根据需要触发您的搜索。

快乐编码！

Answer 2

我遇到了同样的问题。 当组件重新渲染时，它会将焦点返回到最后单击的单元格。

使用 DataGrid 中的state道具，我能够为我的用例解决此问题，但请注意这可能会给您带来意想不到的后果。

<DataGrid
  state={{
    keyboard: {
      cell: null,
      columnHeader: null,
      isMultipleKeyPressed: false,
    }
  }}