React-Bootstrap模式不显示自定义上下文菜单的问题

Question

我是React和Web-Dev的新手。我创建一个自定义上下文菜单时，用户右键单击我正在创建的web应用程序。当您单击自定义上下文菜单时，应该弹出一个模式。然而，模态并没有出现。我做错了什么?

下面是上下文菜单的代码:

class ContextMenu extends React.Component {
constructor(props){
super(props);
this.state = {
xPos: "0px",
yPos: "0px",
showMenu: false,
}
}
componentDidMount() {
document.addEventListener("click", this.handleClick);
document.addEventListener("contextmenu", this.handleContextMenu);
}
componentWillUnmount() {
document.removeEventListener("click", this.handleClick);
document.removeEventListener("contextmenu", this.handleContextMenu);
}
handleClick = (e) => {
if (this.state.showMenu) this.setState({ showMenu: false });
}
handleContextMenu = (e) => {
e.preventDefault();
this.setState({
xPos: `${e.pageX}px`,
yPos: `${e.pageY}px`,
showMenu: true,
})
}
alertClicked = () => {
<Modal show = {true}>
<Modal.Header closeButton>
<Modal.Title>Modal Title</Modal.Title>
</Modal.Header>
</Modal>
}
render() {
const { showMenu, yPos, xPos } = this.state;
if (showMenu) {
return (
<div
className="menu-container"
style={{
top: yPos,
left: xPos,
zIndex: 9,
position: "absolute",
}}>
<ListGroup>
<ListGroup.Item action onClick = {this.alertClicked}>
Show Modal
</ListGroup.Item>
</ListGroup>
</div>
);
} else return null;
}

}

这是我要创建上下文菜单的文章。

Answer 1

您不能像这样从事件处理程序返回JSX，并期望它与您从函数体返回的JSX一起呈现。

将模态JSX移动到render生命周期方法中，替换"显示模态";文本。

class ContextMenu extends React.Component {
constructor(props) {
super(props);
this.state = {
xPos: "0px",
yPos: "0px",
showMenu: false
};
}
componentDidMount() {
document.addEventListener("click", this.handleClick);
document.addEventListener("contextmenu", this.handleContextMenu);
}
componentWillUnmount() {
document.removeEventListener("click", this.handleClick);
document.removeEventListener("contextmenu", this.handleContextMenu);
}
handleClick = (e) => {
if (this.state.showMenu) this.setState({ showMenu: false });
};
handleContextMenu = (e) => {
e.preventDefault();
this.setState({
xPos: `${e.pageX}px`,
yPos: `${e.pageY}px`,
showMenu: true
});
};
alertClicked = () => {
// do something when clicked?
};
render() {
const { showMenu, yPos, xPos } = this.state;
if (showMenu) {
return (
<div
className="menu-container"
style={{
top: yPos,
left: xPos,
zIndex: 9,
position: "absolute"
}}
>
<ListGroup>
<ListGroup.Item action onClick={this.alertClicked}>
<Modal show={true}>
<Modal.Header closeButton>
<Modal.Title>Modal Title</Modal.Title>
</Modal.Header>
</Modal>
</ListGroup.Item>
</ListGroup>
</div>
);
} else return null;
}
}

我想到你可能试图从打开模态上下文菜单。在这种情况下，添加一个单独的showModal状态，在alertClick处理程序中切换true。使用showModal状态控制Modal的openprop

class ContextMenu extends React.Component {
constructor(props) {
super(props);
this.state = {
xPos: "0px",
yPos: "0px",
showMenu: false
};
}
componentDidMount() {
document.addEventListener("click", this.handleClick);
document.addEventListener("contextmenu", this.handleContextMenu);
}
componentWillUnmount() {
document.removeEventListener("click", this.handleClick);
document.removeEventListener("contextmenu", this.handleContextMenu);
}
handleClick = (e) => {
if (this.state.showMenu) this.setState({ showMenu: false });
};
handleContextMenu = (e) => {
e.preventDefault();
this.setState({
xPos: `${e.pageX}px`,
yPos: `${e.pageY}px`,
showMenu: true,
showModal: false
});
};
alertClicked = () => {
this.setState({ showModal: true });
};
render() {
const { showMenu, yPos, xPos } = this.state;
if (showMenu) {
return (
<div
className="menu-container"
style={{
top: yPos,
left: xPos,
zIndex: 9,
position: "absolute"
}}
>
<ListGroup>
<ListGroup.Item action onClick={this.alertClicked}>
<Modal show={this.state.showModal}>
<Modal.Header closeButton>
<Modal.Title>Modal Title</Modal.Title>
</Modal.Header>
</Modal>
</ListGroup.Item>
</ListGroup>
</div>
);
} else return null;
}
}