javascript - 如何在React中将确认组件添加到现有导航组件

我的React程序中有一个现有的导航组件，该导航组件具有onClicks可以“托管”，“加入”和“注销”，并且我想向“注销”部分添加一个确认组件，以确认用户是否真的要注销或不。
这是代码的导航部分：

export default class Navigation extends Component {
  state = { activeItem: 'home' };

  handleItemClick = (e, { name }) => this.setState({ activeItem: name });

  render() {
    const { activeItem } = this.state;

    return (
      <Segment inverted>
        <Menu inverted pointing secondary>
          <Menu.Item
            as={Link}
            to='/'
            name='home'
            active={activeItem === 'home'}
            onClick={this.handleItemClick}
          />
          <Menu.Item
            as={Link}
            to='/host'
            name='host'
            active={activeItem === 'host'}
            onClick={this.handleItemClick}
          />
          <Menu.Item
            as={Link}
            to='/join'
            name='join'
            active={activeItem === 'join'}
            onClick={this.handleItemClick}
          />
          <Menu.Item
            as={Link}
            to='/logout'
            name='logout'
            active={activeItem === 'logout'}
            onClick={this.handleItemClick}
          />
        </Menu>
      </Segment>

react.semantic-ui.com具有以下代码块以实现确认组件：

import React, { Component } from 'react'
import { Button, Confirm } from 'semantic-ui-react'

class ConfirmExampleConfirm extends Component {
  state = { open: false }

  open = () => this.setState({ open: true })
  close = () => this.setState({ open: false })

  render() {
    return (
      <div>
        <Button onClick={this.open}>Show</Button>
        <Confirm
          open={this.state.open}
          onCancel={this.close}
          onConfirm={this.close}
        />
      </div>
    )
  }
}

export default ConfirmExampleConfirm

知道如何将其添加到导航组件中吗？

最佳答案

是的，在React中创建模式的一种简单方法是使用portals。它允许您将元素呈现在其他所有元素之上（例如模态）。然后，使用父容器中的状态来控制是否显示/隐藏状态以及取消/确认注销后的结果。

LogoutConfirmation.js

import React, { Component, Fragment } from 'react';
import { createPortal } from 'react-dom';

export const LogoutConfirmation = ({ isOpen, cancel, close}) => {

  if(isOpen) {
    return createPortal(
      <Confirm
        open={isOpen}
        onCancel={cancel}
        onConfirm={close}
      />,
      document.body
    );

  return null;
};

Navigation.js

class Navigation extends Component {
  constructor() {
    this.state = {
      activeItem: 'home',
      logoutModalIsOpen: false
    };
  }

  handleItemClick = (e, { name }) => this.setState({ activeItem: name });

  toggleLogoutModal = () => {
    this.setState({ logoutModalIsOpen: !this.state.logoutModalIsOpen });
  }

  confirmLoggingOut = () => {
    this.state({ logoutModalIsOpen: false, activeItem: 'logout' });

    // if using react-router, you can programatically change the app's
    // url to /logout like you have with your like with this code
    this.props.history.push('/logout');
  }

  render() {
    const { activeItem } = this.state;

    return (
      <Fragment>
        <Segment inverted>
          <Menu inverted pointing secondary>
            <Menu.Item
              as={Link}
              to='/'
              name='home'
              active={activeItem === 'home'}
              onClick={this.handleItemClick}
            />
            <Menu.Item
              as={Link}
              to='/host'
              name='host'
              active={activeItem === 'host'}
              onClick={this.handleItemClick}
            />
            <Menu.Item
              as={Link}
              to='/join'
              name='join'
              active={activeItem === 'join'}
              onClick={this.handleItemClick}
            />
            <Menu.Item
              as={Button}
              name='logout'
              active={activeItem === 'logout'}
              onClick={this.toggleLogoutModal}
            />
          </Menu>
        </Segment>
        <LogoutConfirmation
          isOpen={this.state.logoutModalIsOpen}
          cancel={this.toggleLogoutModal}
          close={this.confirmLoggingOut}
        />
      </Fragment>
    );
  }
}
export default Navigation;

关于javascript - 如何在React中将确认组件添加到现有导航组件，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/58000172/