React类组件跨组件调用onclick事件控制showModal状态无响应

• 状态切换逻辑完全错误：togglePop方法硬编码将showModal设为true，没有实现状态取反逻辑。当Modal已处于显示状态（showModal: true）时，点击关闭按钮触发该方法，状态值没有产生任何变化，React不会触发组件重渲染，直接导致点击操作完全无响应。
• 缺失Modal打开的触发入口：组件初始状态showModal为false，但全流程没有任何事件能将该状态从false切换为true——页面上的Validate按钮没有绑定任何点击事件，预先写好的validation方法也没有挂载到元素上，根本走不到渲染Modal的分支。
• 日期取值存在运行时报错风险：当前Calendar组件没有开启范围选择模式，初始date是单个Date对象，但后续展示选中日期时直接取date[0]、date[1]，会因为类型不匹配抛出异常，导致组件渲染中断。

1. 重写togglePop逻辑，基于前一次的状态值做取反操作，实现Modal打开、关闭的双向切换
2. 给Validate按钮绑定点击事件，触发校验流程的同时拉起Modal
3. 给Calendar组件开启范围选择模式，匹配日期展示的取值逻辑，避免运行时报错

修正后的Avaibalities组件代码：

import React from 'react';
import Calendar from 'react-calendar';
import Modal from '../pages/Modal';

class Avaibalities extends React.Component {
  state = {
    date: new Date(),
    showDate: false,
    showModal: false,
  };

  onChange = (date) => {
    this.setState({ date });
  };

  // 切换Modal显示/隐藏状态
  togglePop = () => {
    this.setState(prevState => ({
      showModal: !prevState.showModal
    }));
  };

  validation = () => {
    this.setState({ showDate: true });
    this.togglePop();
  };

  render() {
    return (
      <div>
        <div className="home">
          <div className="calendarContent">
            <div>
              <Calendar
                onChange={this.onChange}
                value={this.state.date}
                locale="en-GB"
                selectRange={true}
              />
              <>
                <button 
                  className="button"
                  onClick={this.validation}
                >
                  Validate
                </button>
                <div>
                  {this.state.showModal && (
                    <Modal toggle={this.togglePop} />
                  )}
                </div>
              </>
              {this.state.showDate && this.state.date?.length > 0 ? (
                <div>
                  <p>
                    From : {this.state.date[0].toLocaleDateString()} to :{' '}
                    {this.state.date[1].toLocaleDateString()}
                  </p>
                </div>
              ) : null}
            </div>
          </div>
        </div>
      </div>
    );
  }
}

export default Avaibalities;

Modal组件的原有逻辑不需要修改，其通过this.props.toggle()触发父组件回调的链路是完全通顺的。

整个联动逻辑基于React的状态提升原则设计：showModal的状态完全由父组件Avaibalities统一管控，子组件Modal不持有自身的显示状态，只负责触发父组件传入的回调方法。
完整交互链路：

• 点击Validate按钮 → 触发校验方法 → 调用togglePop将showModal设为true → 父组件检测到状态变更触发重渲染 → 渲染Modal组件
• 点击Modal内的关闭叉号 → 调用同一个togglePop方法将showModal取反为false → 父组件移除Modal的渲染

内容的提问来源于stack exchange，提问作者Achour Benakli