当我将状态从 true 更改为 false 时，为什么我的模态没有隐藏在反应中？

Question

我有一个模态组件依赖于投资组合组件中的状态，如下所示：

import React, { Component } from 'react';
import Modal from './Modal';
export default class Porfolio extends Component {
  constructor(props) {
    super(props);
    this.state = {
      modalIsOpen: false
    };
  }

  render() {
    const handleClose = () => {
      console.log("Is this working?")
      this.setState({ modalIsOpen: false })
    };
    let resumeData = this.props.resumeData;
    return (
      <section id="portfolio">
        <div className="row">
          <div className="twelve columns collapsed">
            <h1>Check Out Some of My Works.</h1>
            <div id="portfolio-wrapper" className="bgrid-quarters s-bgrid-thirds cf">
              {
                resumeData.portfolio && resumeData.portfolio.map((item) => {
                  return (
                    <div className="columns portfolio-item">
                      <div className="item-wrap">
                        <img src={`${item.imgurl}`} className="item-img" />
                        <div className="overlay" onClick={() => this.setState({ modalIsOpen: true })} >
                          {this.state.modalIsOpen ? <Modal item={item} handleClose={handleClose} /> : <div />}
                          <div className="portfolio-item-meta">
                            <h5>{item.name}</h5>
                            <p>{item.description}</p>
                          </div>
                        </div>
                      </div>
                    </div>
                  )
                })
              }
            </div>
          </div>
        </div>
      </section>
    );
  }
}

我的模态组件是这样编码的：

import React, { Component } from 'react';
export default class Modal extends Component {
    render() {
        let item = this.props.item;
        let handleClose = this.props.handleClose;
        let state = this.props.state;
        return (

            <div className="popup-modal">
                <div className="modal-content">
                    <div className="description-box">
                        <button onClose={handleClose}>X</button>
                        <h4>Testing</h4>
                        <p>This is a test</p>
                        <a href="#">This is a clickable link</a>
                    </div>
                </div>
            </div >
        )
    }
}

我的模式在单击时打开得很好，但是在我的组件中关闭测试“x”按钮时，它似乎是运行函数，我相信状态正在更改为 false，但是它没有隐藏模态。谁能看看我是否遗漏了什么？

对于完整的 github 存储库： https://github.com/WarriorofZarona/React-Portfolio-1

Answer 1

我相信您的关闭点击事件正在冒泡。

呈现后的代码将如下所示：

<div className="overlay" onClick={() => this.setState({ modalIsOpen: true })} > // Click handler one
  this.state.modalIsOpen ? 
    <div className="popup-modal">
      <div className="modal-content">
        <div className="description-box">
          <button onClick={handleClose}>X</button> // Click handler two
          <h4>Testing</h4>
          <p>This is a test</p>
          <a href="#">This is a clickable link</a>
        </div>
      </div>
    </div >
 : <div />}
  <div className="portfolio-item-meta">
    <h5>{item.name}</h5>
    <p>{item.description}</p>
  </div>
</div>

button onClick 将始终触发 div onClick，因为 button 是 div 的子级。这意味着一旦模态关闭，它将是 re-opened.

要解决此问题，您需要从内部点击处理程序调用 e.stopPropagation();。

const handleClose = (e) => {
  e.stopPropagation();
  console.log("Is this working?")
  this.setState({ modalIsOpen: false })
};

这里有几个运行例子来说明。

无效：

class Example extends React.Component {
  constructor(props) {
    super(props);
    this.state = { open: false }
  }
  
  handleClick = (value) => {
    this.setState({ open: value });
  }
    
  render() {
  
    console.log(this.state.open)
    return (
      <div onClick={() => this.handleClick(false)}>
        <button onClick={() => this.handleClick(true)}>Click me</button>
      </div>
    )
  }
}

ReactDOM.render(<Example/>,document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root" />

有效：

class Example extends React.Component {
  constructor(props) {
    super(props);
    this.state = { open: false }
  }
  
  handleClick = (value) => {
    this.setState({ open: value });
  }
    
  render() {
  
    console.log(this.state.open)
    return (
      <div onClick={() => this.handleClick(false)}>
        <button 
          onClick={(e) => {
            e.stopPropagation();
            this.handleClick(true);
          }}
        >Click me</button>
      </div>
    )
  }
}

ReactDOM.render(<Example/>,document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"/>

当我将状态从 true 更改为 false 时，为什么我的模态没有隐藏在反应中？

Why does my modal not hide in react when I change my state from true to false?

javascript

frontend

modal-dialog

jsx

reactjs