javascript - React Button Click to open Popup - Stack Overflow

admin管理员组

文章数量:1376079

I don't have much experience with React. What I want to do is to be able to open a popup when I press the button. I've looked through a lot of examples but couldn't figure out why it wasn't. Here is my code;

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: '', mand: '', 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 modo 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 modo 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>

I don't have much experience with React. What I want to do is to be able to open a popup when I press the button. I've looked through a lot of examples but couldn't figure out why it wasn't. Here is my code;

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: '', mand: '', 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 modo 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 modo 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>

• javascript
• reactjs
• popup

Share Improve this question Follow asked Aug 16, 2022 at 9:21 DidemDidem 8322 gold badges44 silver badges1111 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

isOpen is not a property of this, but of state. You have to write:

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

Here is the documentation in case you want to read about it yourself

You should call state values proper way. See examples here. And also you should fix the togglePopup function:

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

So it'll be changed to false when you call it in the handleClose function.

isOpen was in the State.. you need to access it as this.state.isOpen in your return Statement

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

本文标签： javascriptReact Button Click to open PopupStack Overflow