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

Question

我的 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

知道如何将它添加到我的导航组件中吗？

Answer 1

是的，在 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;
};

导航.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;