在同一组件中反应渲染多个模态 [英] React Rendering Multiple Modals in Same Component

问题描述

我是React和代码编写的新手.我正在尝试在同一个组件中呈现多个模态，但是它们都是同时呈现的，因此看起来所有链接都在最后一个模态中呈现文本.
在这里设置状态:

I'm new to React and to coding in general. I'm trying to render multiple modals in the same component, but they are all being rendered at the same time so that it looks like all the links are rendering the text in the last modal.
Here's where the state is set:

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() {

这是模态构造:

And here's the modal construction:

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()吗?

Should there be a value in the empty parentheses -> openModal() & closeModal() ?

推荐答案

一个朋友帮我解决了这个问题.代码的上半部分保持不变，模态构造发生了什么变化(对'html'进行了一些非常有用的美学更改):

A friend helped me out with this one. The top half of code remains the same, what changes is in the modal construction (some really helpful aesthetic changes were also made to the '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>

如果任何人都可以提供详尽的说明，请这样做！另外，还有另一种方法可以使用绑定"来完成此操作，但是我不知道如何.

If anyone else can provide a thorough explanation, please do so! Also, there is another way to do this using 'bind', but I don't know how.

这篇关于在同一组件中反应渲染多个模态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！