ReactJS模态窗点击无响应，求排查错误原因

你的代码存在三个核心错误，导致模态窗无法正常触发：

1. 错误的状态管理方式 #

你自定义的modalState只是一个普通函数，完全不具备React的状态追踪能力。React组件必须通过useState钩子（类组件用this.state）来声明状态，这样React才能监听状态变化并触发组件重新渲染。

2. 错误的状态更新语法 #

你直接通过setModal = true赋值的方式更新状态是错误的。setModal是useState返回的状态更新函数，必须通过调用它来更新状态（比如setModal(true)），直接赋值不会触发组件重新渲染。

3. Modal组件的Props传递错误 #

• show={modalState(setModal)}：这里你把状态更新函数setModal传给modalState，最终传递给show的是一个函数而非布尔值，模态窗无法判断显示状态。
• handleClose={modalState(false)}：这会直接执行modalState(false)并把false作为handleClose的值，而不是一个点击时才执行的回调函数，导致关闭按钮无效。

修复后的完整代码示例 #

第一步：在使用模态窗的组件中正确声明状态 #

import React, { useState } from 'react';
import Modal from './Modal';
import Button from 'react-bootstrap/Button';

function UserManagementComponent() {
  // 声明模态窗显示状态，初始为关闭
  const [isModalOpen, setIsModalOpen] = useState(false);

  return (
    <div>
      {/* 触发模态窗的按钮 */}
      <Button 
        variant="primary" 
        size="sm" 
        onClick={() => setIsModalOpen(true)}
      >
        Add User
      </Button>

      {/* 模态窗组件 */}
      <Modal 
        show={isModalOpen} 
        handleClose={() => setIsModalOpen(false)}
      >
        {/* 这里添加模态窗的内容，比如用户表单 */}
        <h3>添加新用户</h3>
        <div>
          {/* 表单输入框等内容 */}
        </div>
      </Modal>
    </div>
  );
}

export default UserManagementComponent;

第二步：你的Modal组件无需修改（只要确保CSS类正确） #

import React from 'react';
import './Modal.css';
import Button from 'react-bootstrap/Button';

const Modal = ({ handleClose, show, children }) => {
  const showHideClassName = show ? "modal display-block" : "modal display-none";

  return (
    <div className={showHideClassName}>
      <section className="card modal-main">
        {children}
        <div className="clear"></div>
        <Button onClick={handleClose}>
          Close
        </Button>
      </section>
    </div>
  );
};

export default Modal;

内容的提问来源于stack exchange，提问作者Matti Kiviharju