reactjs - 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 组件包装模态内容，如下所示

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