Question

在我的React应用程序上打开模式时出现此错误，但我不知道它的含义或解决方法。

“ 警告：Material-UI：模态内容节点不接受焦点。为了辅助技术的利益，将节点的tabIndex设置为“ -1”。”

<SettingsModal event={this.state.eventDetails} id={this.state.eventDetails.id} delete={this.handleRemoveEvent}/>

返回：

return(
  <>
    <Paper className={classes.SettingsModal}>
        <h1>{this.props.event.name}</h1>
        <p>{this.props.event.description}</p>
        <p>{this.props.event.id}</p>
        <Button onClick={(e) => this.props.delete(this.props.event)}>Delete Event</Button>
    </Paper>
  </>
);

Answer 1

我有同样的问题。显然将div包裹在SettingsModal周围应该可以解决它。

Answer 2

我已找到解决方法！要消除此错误，您应该像这样用DialogContent组件包装Modal内容

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="app.js"></script>

<title>Ajax 1 - Text File</title>
</head>
<body>
<button id="button" onclick="loadText()">Get Text File</button>

</body>
</html>

Answer 3

自@Idos在上面找到对GitHub Issue的引用以来，所有贡献都归功于@Idos的评论。我发现this specific comment was 有用。

“模态内容”的包装元素需要有一个道具 tabIndex: {-1}

在您的情况下，您需要执行以下操作：

return(
  <Paper tabIndex:{-1} ...>
...
  </Paper>
);

Answer 4

在@Wolfman注释之后，我只使用了React中的Fragment，因为它没有添加任何DOM元素：

render () {
    return (
       <Modal open={this.state.modalOpened} onClose={() => this.setState({ modalOpened: false, modalContent: null })}>
                <>
                    {this.state.modalContent}
                </>
            </Modal>
    );
}

尽管如此，我仍然不明白这个问题：/

React-Material-UI Modal导致tabindex错误

4 个答案: