reactjs - 在同一组件中反应渲染多个模式

Question

我是 React 和一般编码的新手。我试图在同一个组件中呈现多个模态，但它们都同时呈现，因此看起来所有链接都在呈现最后一个模态中的文本。
这里是设置状态的地方：

class Header extends React.Component {
  constructor () {
    super();
    this.state = {open:false}
    this.openModal = this.openModal.bind(this);
    this.closeModal = this.closeModal.bind(this);
    this.handleModalChangeEnter = this.handleModalChange.bind(this, true);
    this.handleModalChangeLogin = this.handleModalChange.bind(this, false);
  }
  openModal () {
    this.setState({open: true}); }
  closeModal () {
    this.setState({open: false}); }
  render() {

这是模态结构：

return (
    <header style={home}>

    <div style={hello}>
      <img style={logo} src='public/ycHEAD.png'/>
      <p style={slogan}>One Calendar for All of Yerevan's Tech Events</p>
    </div>

    <div style={subContainer}>
      <ul style={modalDirectory}>

        <Button onClick={this.openModal}
                style={openButton}>
          <li><a style={tabs}>Enter
              </a></li>
        </button>
        <Modal style={modalCont}
               isOpen={this.state.open}>
              <button onClick={this.closeModal}
                      style={xButton}>x</button>
        </Modal>

        <button onClick={this.openModal} 
                style={openButton}>
          <li><a style={tabs}>Login
              </a></li>
        </button>
        <Modal style={modalCont}
               isOpen={this.state.open}>
          <p>Account</p>
          <button onClick={this.closeModal}
                  style={xButton}>x</button>
        </Modal> 

空括号中是否应该有一个值 -> openModal() & closeModal() ？

Answer 1

一位朋友帮我解决了这个问题。代码的上半部分保持不变，模态结构发生了哪些变化（对“html”也进行了一些非常有用的美学变化）：

return (
    <header style={home}>      
    <div style={hello}>
        <img style={logo} src='public/ycHEAD.png'/>
        <p style={slogan}>One Calendar for All of Yerevan's Tech Events</p>
      </div>

      <div style={subContainer}>
        <ul style={modalDirectory}>

          <li style={tabs}>
            <button
              onClick={() => this.openModal('login')}
              style={openButton}>
              Enter
            </button>
          </li>

          <li style={tabs}>
            <button
              onClick={() => this.openModal('calendar')}
              style={openButton}>
              Calendar
            </button>
          </li>

          <li style={tabs}>
            <button
              onClick={() => this.openModal('team')}
              style={openButton}>
              Meet Us
            </button>
          </li>

        </ul>
      </div>


      <Modal
        style={modalCont}
        isOpen={this.state.activeModal === 'login'}>
        <p>1!</p>
          <button onClick={this.closeModal}
            style={xButton}>x</button>
      </Modal>

      <Modal
        style={modalCont}
        isOpen={this.state.activeModal === 'calendar'}>
        <p>2!</p>
          <button onClick={this.closeModal}
            style={xButton}>x</button>
      </Modal>

      <Modal
        style={modalCont}
        isOpen={this.state.activeModal === 'team'}>
        <p>3!</p>
          <button onClick={this.closeModal}
            style={xButton}>x</button>
      </Modal>

     </header>

如果其他人可以提供详尽的解释，请这样做！此外，还有另一种使用“绑定”的方法，但我不知道如何。

Answer 2

我为那些在使用"react-modal"时需要此解决方案的人创建了类似的方法但更详细的模型。上面的问题不清楚是否使用了 react-modal ，因为缺少导入部分，但似乎有对它的引用。对于那些正在寻找使用 react-modal 在同一组件中显示多个模式的解决方案的人，这里是解决方案和演示：

import React from "react";
import Modal from "react-modal";

class MutipleButtonsWithModalInSameComponent  extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        showModal: false,
        activeModal: "",
      };
      this.handleOpenModal = this.handleOpenModal.bind(this);
      this.handleCloseModal = this.handleCloseModal.bind(this);
    }
  
    handleOpenModal(val) {
      this.setState({ activeModal: val });
      this.setState({ showModal: true });
    }
  
    handleCloseModal() {
      this.setState({ showModal: false });
      this.setState({ showModal: "" });
    }
    render() {
      return(
        <>
        {/* {'one item with modal link -login'} */}
        <div className="icon">
            <a
              className="button"
              onClick={() => this.handleOpenModal("login")}
            >
              login (modal popup)
            </a>
            <Modal
              isOpen={
                this.state.showModal &&
                this.state.activeModal === "login"
              }
              contentLabel="login Modal"
            >
              <div className="content">
                <button className="close" onClick={this.handleCloseModal}>X</button>
                <p>login content in here</p>
              </div>

            </Modal>
        </div>
        {/* {'another item with modal link calendar, add more by mutiplying this below'} */}
        <div className="icon">
            <a
              className="button"
              onClick={() => this.handleOpenModal("calendar")}
            >
              calendar (modal popup)
            </a>
            <Modal
              isOpen={
                this.state.showModal &&
                this.state.activeModal === "calendar"
              }
              contentLabel="calendar Modal"
            >
              <div className="content">
                <button className="close" onClick={this.handleCloseModal}>X</button>
                <p>calendar content in here...</p>
              </div>

            </Modal>
        </div>

        {/* {'another item with modal link team, add more by mutiplying this below'} */}
        <div className="icon">
            <a
              className="button"
              onClick={() => this.handleOpenModal("team")}
            >
              team (modal popup)
            </a>
            <Modal
              isOpen={
                this.state.showModal &&
                this.state.activeModal === "team"
              }
              contentLabel="team Modal"
            >
              <div className="content">
                <button className="close" onClick={this.handleCloseModal}>X</button>
                <p>team content in here...</p>
              </div>

            </Modal>
        </div>

        </>
      )
      
    }
}
export default MutipleButtonsWithModalInSameComponent;

这是一个stackblitz 链接或演示

Answer 3

你可以通过两种方式做到这一点。
1)简单但不可扩展：为每个 Modal 维护不同的状态变量和函数。IE，

this.state = {openModal1:false, openModal2:false}
this.openModal1 = this.openModal1.bind(this);
this.closeModal1 = this.closeModal1.bind(this);
this.openModal2 = this.openModal2.bind(this);
this.closeModal2 = this.closeModal2.bind(this); 

正如我们所看到的，这样做的问题是代码的冗余。

2)使用函数消除冗余：维护一个函数来改变模态的内容。

class Header extends React.Component {
  constructor () {
    super();
    this.state = {open:false, ModalContent:''}
    this.openModal = this.openModal.bind(this);
    this.closeModal = this.closeModal.bind(this);
    this.handleModalChangeEnter = this.handleModalChange.bind(this);
    this.handleModalChangeLogin = this.handleModalChange.bind(this);
  }
  openModal () {
    this.setState({open: true}); }
  closeModal () {
    this.setState({open: false}); }
  handleModalChange1() {
    this.setState({ ModalContent : '<h1>Modal1 Content</h1>' 
  }
  handleModalChange2() {
    this.setState({ ModalContent : '<h1>Modal2 Content</h1>' 
  }
  render() {

模态结构应该是：

return (
<header style={home}>

<div style={hello}>
  <img style={logo} src='public/ycHEAD.png'/>
  <p style={slogan}>One Calendar for All of Yerevan's Tech Events</p>
</div>

<div style={subContainer}>
  <ul style={modalDirectory}>

    <button onClick={this.handleModalChange1}
            style={openButton}>
      <li><a style={tabs}>Enter
          </a></li>
    </button>
    <button onClick={this.handleModalChange2} 
            style={openButton}>
      <li><a style={tabs}>Login
          </a></li>
    </button>
    <Modal style={modalCont}
           isOpen={this.state.open}>
      <div dangerouslySetInnerHTML={{__html: this.state.ModalContent}} />
      <button onClick={this.closeModal}
              style={xButton}>x</button>
    </Modal>