Question

我在尝试找出如何向我的模式中添加一个正常运行的关闭按钮时遇到了很多问题-构造函数/道具一直没有工作，并且我不确定在按钮元素中的onClick =之后要放什么

pip3 install -r requirements.txt

Answer 1

这里有几个问题。首先，远离直接操纵DOM。 React使用虚拟的DOM，因此您不需要手动添加或删除DOM元素。 React通过DOM方法自动处理此render操作。另外，您需要使用某种Modal（isOpen）来控制此state。可以通过React的本地状态或Redux的状态。无论哪种方式，都需要对其进行控制和比较。简单地说，如果打开，则渲染Modal，如果关闭，则渲染null。

此外，该Modal组件可以构造为可重用。只需将其作为child添加到另一个有状态parent组件中，然后将要呈现的任何children都包含在其中即可。

工作示例：

components / Example.js （父组件）

import React, { Component } from "react";
import Modal from "../Modal";
import "./styles.css";

class Example extends Component {
  state = { isOpen: false };

  handleOpenModal = () => {
    this.setState({ isOpen: true });
  };

  handleCloseModal = () => {
    this.setState({ isOpen: false });
  };

  render = () => (
    <div className="example">
      <h2>Simple Modal Example</h2>
      <button
        className="uk-button uk-button-primary uk-button-small"
        onClick={this.handleOpenModal}
      >
        Open Modal
      </button>
      <Modal isOpen={this.state.isOpen} onCloseModal={this.handleCloseModal}>
        <h1 className="title">Hello!</h1>
        <p className="subtitle">There are two ways to close this modal</p>
        <ul>
          <li>Click outside of this modal in the grey overlay area.</li>
          <li>Click the close button below.</li>
        </ul>
        <button
          className="uk-button uk-button-danger uk-button-small"
          onClick={this.handleCloseModal}
        >
          Close
        </button>
      </Modal>
    </div>
  );
}

export default Example;

components / Modal.js （子组件-该组件具有许多较小的组件，这些组件为了便于重用和易于理解而进行了分离-它们基本上是简单的div附加了一些styles-请参阅下面的注释）

import React from "react";
import PropTypes from "prop-types";
import BackgroundOverlay from "../BackgroundOverlay"; // grey background
import ClickHandler from "../ClickHandler"; // handles clicks outside of the modal
import Container from "../Container"; // contains the modal and background
import Content from "../Content"; // renders the "children" placed inside of <Modal>...</Modal>
import ModalContainer from "../ModalContainer"; // places the modal in the center of the page

// this is a ternary operator (shorthand for "if/else" -- if cond ? then : else)
// below can be read like: if isOpen is true, then return/render the modal, else return null
const Modal = ({ children, isOpen, onCloseModal }) =>
  isOpen ? (
    <Container>
      <BackgroundOverlay />
      <ModalContainer>
        <ClickHandler isOpen={isOpen} closeModal={onCloseModal}>
          <Content>{children}</Content>
        </ClickHandler>
      </ModalContainer>
    </Container>
  ) : null;

// these proptype declarations are to ensure that passed down props are 
// consistent and are defined as expected
Modal.propTypes = {
  children: PropTypes.node.isRequired, // children must be a React node
  isOpen: PropTypes.bool.isRequired, // isOpen must be a boolean
  onCloseModal: PropTypes.func.isRequired // onCloseModal must be a function
};

export default Modal;

Answer 2

看起来模态是完全基于其是否由父代渲染的。缺少全部重新构造此模式的方法，实现所需目标的唯一方法是传递某种onClose回调：

class Parent extends React.Component {
  state = { isModalOpen: false };

  render() {
    return (<div>
      // Stuff
      {this.state.isModalOpen &&
        <Modal onClose={() => this.setState({ isModalOpen: false })}/>
      }
      // Stuff
    </div>);
  }
}

在您的Modal中：

<div className="modal">
    {this.props.children}
    <button onClick={this.props.onClose}>Close</button>
</div>

关闭反应模态

2 个答案: