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

【问题标题】：React Material UI - DataGrid Keeps Stealing Focus from Input FieldReact Material UI - DataGrid 不断从输入字段中窃取焦点
【发布时间】：2021-07-09 23:18:14
【问题描述】：

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

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

Snippet to make the issue clearer (zoomed in on top left of table + search bar)

这是包含我的问题的所有 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>

【问题讨论】：

你有没有想出一些可行的方法？我有同样的问题，下面的状态答案对我不起作用。

标签： javascript reactjs input material-ui

【解决方案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 应该会根据需要触发您的搜索。

【讨论】：

感谢您的帮助！我试了一下，但 onSubmit 会重新加载页面，这不是我想要的。我实际上希望在用户键入时过滤表格行。这在 onSubmit 是不可能的，对吗？
我相信这与工作更改后重新渲染时的数据网格聚焦有关。可惜我也有这个问题，网上没看到解决办法。

【解决方案2】：

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

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

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

【讨论】：