时间戳

首页 > 解决方案 > 如何在 React 中添加关闭 Modal 的过渡以及在 Modal 外部单击时如何关闭？

javascript - 如何在 React 中添加关闭 Modal 的过渡以及在 Modal 外部单击时如何关闭？

问题描述

我知道有很多问题。我已经检查过了，但仍然找不到我的方法。不得不问这个，因为我被卡住了，无法移动到任何地方。我是 React 的新手，仍然是 React 的初学者，并试图在我的项目中实现 Modals。这里有两个问题。

  1. 如何在关闭时添加过渡？

一旦用户单击卡片，我就会显示带有过渡的模式，但是当用户关闭时，由于某种原因我无法应用过渡。

我更改了打开或关闭模式的方法，并使用以下代码在 css 中进行转换：

.show .modal-parent {
  animation-name: zoom;
  animation-duration: 0.6s;
}

@-webkit-keyframes zoom {
    from {-webkit-transform:scale(0)} 
    to {-webkit-transform:scale(1)}
  }

  @keyframes zoom {
    from {transform:scale(0)} 
    to {transform:scale(1)}
  }

每当用户单击卡片时，我都会显示.show类并.modal-parent在所有模态内容所在的位置应用过渡。现在我想在用户关闭模式时做同样的事情。

  1. 在外部单击时如何关闭模式？

App.js 文件在这里：

import React from "react";
import "./App.css";
import Cards from "./components/Cards/cards.js";
import users from "./employees.json";
import Navbar from "./components/Navbar";
import Modals from "./components/Modals";

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      index: 0,
      open: false,
    };
    this.nextPerson = this.nextPerson.bind(this);
  }

  userIndex = (cardIndex) => {
    this.setState({
      index: cardIndex,
      open: true,
    });
  };

  nextPerson = () => {
    this.setState({
      index: this.state.index + 1,
    });
  };
  previousPerson = () => {
    this.setState({
      index: this.state.index - 1,
    });
  };
  close = () => {
      this.setState({
        open: false,
      });

  };
  render() {
    let person = users[this.state.index];

    return (
      <div className="container">
        <Navbar />
        <div className="team-text"><p> Our team of <span className="team-number">42</span> strategists, designers, engineers, developers and managers<br/>make custom products for startups and leading companies. </p> </div>
        <div className="top-card">
          {users.map((user) => {
            return (
              <Cards
                user={user}
                users={users}
                key={user.id}
                userIndex={this.userIndex}
              />
            );
          })}
          <Modals
            open={this.state.open}
            users={users}
          >
            <div class="modal-parent">
              <div className={`modal-nav ${person.department === "Engineering" ? "engineer" : ""} ${person.department === "Business" ? "business" : ""}${person.department === "Design" ? "design" : ""}`}>
                <div className="modal-close">
                  <a
                    href="#close"
                    title="Close"
                    className="close"
                    type="button"
                    onClick={this.close}
                  >
                    Close
                  </a>
                </div>{" "}
              </div>

              <div className="modal-image">
                <img src={person.avatar} alt="" class="modal-avatar"></img>{" "}
              </div>
              <div> </div>
              <div className="modal-info">
                <h1 className="modal-name">
                  {person.firstName} {person.lastName}
                </h1>
                <h5 className="modal-title">{person.jobTitle}</h5>
                <h5 className="modal-department">{person.department}</h5>
              </div>
              <div className="modal-bio">
                <p>{person.bio}</p>
              </div>
              <div className="modal-contacts">
                <a href={`mailto: ${person.contact.phone}`}>
                  <span className={`material-icons phone ${person.department === "Engineering" ? "engineer" : ""} ${person.department === "Business" ? "business" : ""}${person.department === "Design" ? "design" : ""}`}>call</span><span className="contact-text">{person.contact.phone}</span>
                </a>{" "}
                <a href={`mailto: ${person.contact.email}`}>
                  <span className={`material-icons email ${person.department === "Engineering" ? "engineer" : ""} ${person.department === "Business" ? "business" : ""}${person.department === "Design" ? "design" : ""}`}>email</span><span className="contact-text">{person.contact.email}</span>
                </a>{" "}
                <a href={person.contact.url}>
                  <span className={`material-icons computer ${person.department === "Engineering" ? "engineer" : ""} ${person.department === "Business" ? "business" : ""}${person.department === "Design" ? "design" : ""}`}>computer</span><span className="contact-text">{person.contact.url}</span>
                </a>{" "}
              </div>
              <div className="modal-previous-btn">
                <button
                  className="previous-button"
                  onClick={this.previousPerson}
                  disabled={this.state.index <= 0 ? true : false}
                >Previous
                </button>
              </div>
              <div className={`modal-next-btn ${person.department === "Engineering" ? "engineer" : ""} ${person.department === "Business" ? "business" : ""}${person.department === "Design" ? "design" : ""}`}>
                <button
                  className="next-button"
                  onClick={this.nextPerson}
                  disabled={this.state.index >= 41 ? true : false}
                >Next
                </button>
              </div>
            </div>
          </Modals>
        </div>
      </div>
    );
  }
}

export default App;

标签： javascriptcssreactjs

解决方案

要在单击外部时关闭 Modal，您必须修改 Modals 组件。首先，您在开头创建一个 ref：

modalRef = React.createRef();

然后在渲染函数中使用该 ref：

return (
  <div ref={this.modalRef}...

在模态组件的生命周期内监听 mousedown 事件：

componentDidMount() {
    document.addEventListener("mousedown", this.handleMouseDown);
}

componentWillUnmount() {
    document.removeEventListener("mousedown", this.handleMouseDown);
}

并且您测试点击是否在处理程序中的 ref 之外：

// Mouse click event, if outside of the popup then close it
handleMouseDown= (event) => {
    if (!this.modalRef.current.contains(event.target)) {
      // Notify the parent with a callback to hide the modal
    };
}

推荐阅读