javascript - 为什么 React 中的 closeModal 不起作用？

Question

目前我有一个渲染模态组件的组件。

constructor(props) {
        super(props);
        this.state = {
            fieldId: "",
            rating: -1,
            description: "",
            showModal: false //This is what checks if the modal should or shouldnt be rendered
        };
        console.log(props) //week number, beginning with 0
        this.showModal = this.showModal.bind(this);
        this.closeModal = this.closeModal.bind(this);
    }

showModal() {
    console.log("showmodal state before any click")
    console.log(this.state.showModal) //false


    this.setState({
        showModal: true
    }, () => {
        console.log("clicked show modal")
        console.log(this.state.showModal) //true
    });



}

closeModal() {
    this.setState({
        showModal: false
    }, () => {
        console.log("clicked closeModal")
        console.log(this.state.showModal) //true <------ !WHY IS THIS TRUE??
    });
}


    render() {
        var weekId = this.props.weekId;

        //current week, round up
        //lived weeks, round down
        //total weeks, round up
        if (weekId < this.props.weeksToRegisterDate) {
            return <div id={weekId} className="cube-lived"></div>
        } else if (weekId == this.props.currentWeek) {
            return <div id={weekId} title={weekId} className="cube green" onClick={this.showModal}>
                <CalendarFieldModal show={this.state.showModal} close={this.closeModal} />
            </div>
        } else {
            return <div id={weekId} title={weekId} className="cube white" onClick={this.showModal}>
                <CalendarFieldModal show={this.state.showModal} close={this.closeModal} />
            </div>


        }


    }
}

基本上，如果我单击立方体，它将呈现一个模态组件，如下所示。

    import React from 'react'
import './CalendarFieldModal.css'
class CalendarFieldModal extends React.Component {
    constructor(props) {
        super(props);
        this.state = {

        };

    }


    render() {


        if (!this.props.show) {
            return null;
        }
        // return <div className="cube-to-spawn"></div>
        return <div id="open-modal" class="modal-window">
        <div>
          <a href="#" title="Close" class="modal-close" onClick={this.props.close}>Close</a> //this triggers the function and should close the modal
          <h1>Voilà!</h1>
          <div>A CSS-only modal based on the :target pseudo-class. Hope you find it helpful.</div>
          <div><small>Check out</small></div>
          </div>
      </div>



    }
}

export default CalendarFieldModal;

现在在后期组件中，我有一个关闭按钮，如果单击该按钮，我可以看到 closeModal() 函数触发并记录 console.log ，所以我认为状态正在更改为。但它仍然没有关闭模式。所以我不明白这个问题

编辑:这就是它的样子 https://codesandbox.io/embed/quirky-ardinghelli-8fgtx?fontsize=14&hidenavigation=1&theme=dark您必须在新窗口中打开预览，否则模式将无法加载

Answer 1

稍微重构一下:

    if (weekId < this.props.weeksToRegisterDate) {
        return <div id={weekId} className="cube-lived"></div>
    } else {
        const currentStyle = (weekId == this.props.currentWeek) ? "green" : "white";
        return <div id={weekId} title={weekId} 
          className=`cube ${currentStyle}` 
          {...(!this.state.showModal && { onClick: this.showModal })}
        >
          <CalendarFieldModal show={this.state.showModal} close={this.closeModal} />
        </div>
    }

说明

外部<div/>不是this.state.showModal更改感知 - 没有 Prop 更改，不重新渲染 - 无论内部对象的 Prop 发生变化，都应该重新渲染。