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

Question

I have a modal component that is dependent on a state in a portfolio component that looks like this:

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>
    );
  }
}

My modal component is coded like this:

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 >
        )
    }
}

My modal opens just fine when clicked, but on closing the test "x" button in my component, it seems to be running the function and I believe the state is being changed to false, but it is not hiding the modal. Can anyone see if I'm missing anything?

For the full github repo: https://github.com/WarriorofZarona/React-Portfolio-1

Answer 1

I believe your close click event is bubbling.

Your code when rendered will be something like this:

<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>

The button onClick will always trigger the div onClick because the button is a child of the div . This means as soon as the modal is closed it will be re-opened.

To fix this, you need to call e.stopPropagation(); from the inner click handler.

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

Here are a few running examples to illustrate.

Does not work:

 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" />

Does work:

 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"/>