反应按钮点击打开弹出窗口

Question

我对 React 没有太多经验。我想要做的是当我按下按钮时能够打开一个弹出窗口。我浏览了很多例子，但不明白为什么不是。这是我的代码；

Popup.js；

import React from "react";

const Popup = props => {
  return (
    <div className="popup-box">
      <div className="box">
        <span className="close-icon" onClick={props.handleClose}>x</span>
        {props.content}
      </div>
    </div>
  );
};

export default Popup;

Home.js；

 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(
                { isOpen: true }
            )
        }

  render() {
        return (

<div>
                                <input
                                    type="button"
                                    value="Click to Open Popup"
                                    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.isOpen && <Popup
                                    content={<>
                                        <b>Design your Popup</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>Test button</button>
                                    </>}
                                    handleClose={this.togglePopup}
                                />}
                                
                            </div>

Answer 1

isOpen

不是 this 的属性，而是

state

的属性。 你必须写：

{this.state.isOpen && <Popup...

这里是文档，以防您想自己阅读它

Answer 2

您应该以正确的方式调用状态值。请参阅示例此处。而且你还应该修复

togglePopup

功能：

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

所以当你在handleClose函数中调用它时，它会变成

false

。

Answer 3

isOpen 处于 State 状态..您需要在返回语句中以 this.state.isOpen 的形式访问它

 {this.state.isOpen && <Popup content={<></>}

Answer 4

Hloo space 是怎么控制的请拍照