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

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;

Answer 2

您可以通过导航组件控制确认对话框，如下所示：

state = { activeItem: "home", showConfirm: false };

然后执行您可以使用的取消和确定操作：

closeDialog = () => this.setState({ showConfirm: false });

confirmDialog = () => {
    if (this.state.activeItem === "logout") {
      console.log("Logging out...");
      this.setState({ showConfirm: false });
    }
  };

为此，您需要在导航渲染中插入新的ConfirmDialog组件：

 <ConfirmDialog
      open={this.state.showConfirm}
      cancel={this.closeDialog}
      confirm={this.confirmDialog}
    />

您的ConfirmDialog会从导航中期望这些道具并对其执行操作：

import React, { Component } from "react";
import { Confirm } from "semantic-ui-react";

class ConfirmDialog extends Component {
  render() {
    return (
      <div>
        <Confirm
          open={this.props.open}
          onCancel={this.props.cancel}
          onConfirm={this.props.confirm}
        />
      </div>
    );
  }
}

export default ConfirmDialog;

最后，您的代码会这样（单击按钮）：

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

2 个答案: