React - Material-UI Modal 导致 tabindex 出错答案

【问题标题】：React - Material-UI Modal causing an error with the tabindexReact - Material-UI Modal 导致 tabindex 出错
【发布时间】：2019-05-25 20:42:31
【问题描述】：

当我在我的 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>
  </>
);

【问题讨论】：

您必须在此类问题中包含您的代码。但我认为答案在这里github.com/mui-org/material-ui/issues/9775，特别是A tabIndex: -1 on PaperProps did the trick
好的，我将代码添加到问题中。我会在哪里添加 tabIndex？

标签： reactjs material-ui

【解决方案1】：

我找到了解决办法！要消除此错误，您应该使用这样的 DialogContent 组件包装您的模态内容

import DialogContent from '@material-ui/core/DialogContent';
// ...
render () {
    return (
       <Modal open={this.state.modalOpened} onClose={() => this.setState({ modalOpened: false, modalContent: null })}>
                <DialogContent>
                    {this.state.modalContent}
                </DialogContent>
            </Modal>
    );
}

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

所有功劳都归功于@Idos 的上述评论，因为他找到了对GitHub Issue 的引用。我发现this specific comment was 很有用。

Modal Contents 的包装元素需要有一个 prop tabIndex: {-1}

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

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

【讨论】：

【解决方案4】：

根据@Wolfman 的评论，我只是使用了 React 的 Fragment，因为它没有添加任何 DOM 元素：

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

尽管如此，我还是不明白这个问题：/

【讨论】：