React-Bootstrap Modal 的问题没有出现在自定义上下文菜单中

Question

总的来说，我是 React 和 Web-Dev 的新手。当用户右键单击我正在创建的网络应用程序时，我正在创建一个自定义上下文菜单。当您单击自定义上下文菜单时，应该会弹出一个模式。但是，模态没有显示。我做错了什么？

上下文菜单的代码如下：

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

}

这是article我正在创建上下文菜单。

Answer 1

你不能从这样的事件处理程序中 return JSX，并期望它确实用你从函数体中 returning 的 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的open道具。

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