React按钮点击打开弹窗功能失效问题求助

问题定位与修复步骤： #

1. 状态访问错误
   渲染弹窗时的判断条件错误，你用了this.isOpen，但isOpen是存在组件state中的属性，正确写法应为this.state.isOpen。

2. 弹窗切换逻辑不完整
   当前togglePopup函数仅将isOpen设为true，点击弹窗的关闭按钮无法关闭弹窗。需要修改为切换状态的逻辑：

   togglePopup = () => {
     this.setState(prevState => ({
       isOpen: !prevState.isOpen
     }))
   }
   

3. 缺失组件导入
   你的Home.js代码中没有导入Popup组件，需要在文件顶部添加导入语句（根据实际文件路径调整）：

   import Popup from './Popup';
   

修改后的Home.js关键代码： #

import React from 'react';
import Popup from './Popup'; // 添加导入

class Home extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      users: [],
      currentUser: { id: null, name: '', username: '', password: '', command: '', status: '', cpu: null, mac: '', info: '' },
      editing: false,
      editingCommandStop: false,
      editingCommandSleep: false,
      editingCommandStart: false,
      isOpen: false
    }
  }

  togglePopup = () => {
    this.setState(prevState => ({
      isOpen: !prevState.isOpen
    }))
  }

  render() {
    return (
      <div>
        <input
          type="button"
          value="点击打开弹窗"
          onClick={this.togglePopup}
        />
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        {this.state.isOpen && <Popup
          content={<>
            <b>设计你的弹窗</b>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            <button>测试按钮</button>
          </>}
          handleClose={this.togglePopup}
        />}
      </div>
    )
  }
}

export default Home;

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