React - Material-UI Modal 导致 tabindex 错误

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

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

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>
    );
}

Answer 2

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