Модал не отображается при клике (React) - PullRequest
Новая
       45

Модал не отображается при клике (React)

0 голосов
/ 30 января 2020

Я пытаюсь заставить модал функционировать, модал, который я пытаюсь отразить, доступен здесь.

https://codesandbox.io/s/n9zn3n43o0

Кнопка для модала однако отображение самого модального не является. Вот мой точный код для этой функции. 


class App extends React.Component {
  constructor(props) {
    console.log("Props - ", props);
    super(props);
    this.state = {
      modalVisible: false
    };
    this.openModal = this.openModal.bind(this);
  }
  openModal() {
    console.log("Open modal called ", this.state.modalVisible);
    const modalVisible = !this.state.modalVisible;
    this.setState({
      modalVisible
    });
  }
  render() {
    let styles = this.state.modalVisible
      ? { display: "block" }
      : { display: "none" };
    return (
      <div className="App">
        <h1>Hello CodeSandbox</h1>
        <h2>Start editing to see some magic happen!</h2>
        <button
          type="button"
          onClick={this.openModal}
          className="btn btn-info btn-lg"
        >
          Open Modal
        </button>
        <div
          id="myModal"
          className="modal fade in"
          role="dialog"
          style={styles}
        >
          <div className="modal-dialog">
            <div className="modal-content">
              <div className="modal-header">
                <button
                  type="button"
                  onClick={this.openModal}
                  className="close"
                >
                  &times;
                </button>
                <h4 className="modal-title">Modal Header</h4>
              </div>
              <div className="modal-body">
                <p>Some text in the modal.</p>
              </div>
              <div className="modal-footer">
                <button
                  onClick={this.openModal}
                  type="button"
                  className="btn btn-default"
                >
                  Close
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  }
}

А вот код всей страницы 

import React from "react";
import { Link } from "react-router-dom";
import Popup from "reactjs-popup";
import { Button, ButtonToolbar, Modal } from "react-bootstrap";
import ReactDOM from "react-dom";

import AddWorkstation from "./UpdateUserWorkStationDetailsForm";
class DisplayUserAcountDetails extends React.Component {
  constructor() {
    super();

    this.state = { AccountDetails: [] };
  }
  // sets the questions form sql into state for questions
  getItems() {
    var user = window.localStorage.getItem("User");
    if (user) {
      fetch(`/profile-work-station-detailss/${user}`)
        .then(recordset => recordset.json())
        .then(results => {
          this.setState({ AccountDetails: results.recordset });
        });
    } else {
      alert("user not  set");
    }
  }
  //when the component mounts make the sql questions the
  componentDidMount() {
    this.setState({
      AccountDetails: this.getItems()
    });
  }

  render() {
    try {
      return (
        <>
          <h3 style={{ textAlign: "center" }}> Workstations</h3>

          <button></button>
          {this.state.AccountDetails ? (
            <ul>
              <App /> // calling it here
              <Popup
                style={{ width: "300px" }}
                trigger={<button> Help?</button>}
                closeOnDocumentClick
                className={"tooltipBoundary"}
              >
                <AddWorkstation />
              </Popup>

              <Link to="/update-work-station-details">
                <button style={{ float: "right" }}>+</button>
              </Link>

              <br />
              <br />
              {this.state.AccountDetails &&
                this.state.AccountDetails.map(function(AccountDetails, index) {
                  return (
                    <div className="jumbotron">
                      <h3>Work Station</h3>

                      <li> Location: {AccountDetails.DeskLocation}</li>
                      <li>
                        ExtraInformation: {AccountDetails.ExtraInformation}
                      </li>
                      <li>
                        Primary Work Station:
                        {AccountDetails.PrimaryWorkStation}
                      </li>
                      <li> Date Added: {AccountDetails.PrimaryWorkStation}</li>

                      <li>
                        <Link to="/update-work-station-details">
                          <button>Update Account Details</button>
                        </Link>
                      </li>
                    </div>
                  );
                })}
            </ul>
          ) : (
            <ul>
              <div className="jumbotron">
                <h3>Work Station</h3>
                <li> Email: Null </li>
                <li> Name: Null </li>
                <li> Contact Number: Null </li>
                <li>
                  <Link to="/update-work-station-details">
                    <button>Update Accoudnt Details</button>
                  </Link>
                </li>
              </div>
            </ul>
          )}
        </>
      );
    } catch (e) {
      console.log(e);
    }
  }
}

export default DisplayUserAcountDetails;

class App extends React.Component {
  constructor(props) {
    console.log("Props - ", props);
    super(props);
    this.state = {
      modalVisible: false
    };
    this.openModal = this.openModal.bind(this);
  }
  openModal() {
    console.log("Open modal called ", this.state.modalVisible);
    const modalVisible = !this.state.modalVisible;
    this.setState({
      modalVisible
    });
  }
  render() {
    let styles = this.state.modalVisible
      ? { display: "block" }
      : { display: "none" };
    return (
      <div className="App">
        <h1>Hello CodeSandbox</h1>
        <h2>Start editing to see some magic happen!</h2>
        <button
          type="button"
          onClick={this.openModal}
          className="btn btn-info btn-lg"
        >
          Open Modal
        </button>
        <div
          id="myModal"
          className="modal fade in"
          role="dialog"
          style={styles}
        >
          <div className="modal-dialog">
            <div className="modal-content">
              <div className="modal-header">
                <button
                  type="button"
                  onClick={this.openModal}
                  className="close"
                >
                  &times;
                </button>
                <h4 className="modal-title">Modal Header</h4>
              </div>
              <div className="modal-body">
                <p>Some text in the modal.</p>
              </div>
              <div className="modal-footer">
                <button
                  onClick={this.openModal}
                  type="button"
                  className="btn btn-default"
                >
                  Close
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  }
}

Я пробовал несколько примеров, но эта проблема все еще сохраняется. Есть ли что-то, что мне не хватает? Любая помощь с благодарностью.

1 Ответ

0 голосов
/ 30 января 2020

Надеюсь, это кому-нибудь поможет. Это код, который я использовал вместо этого, и он работал нормально. 

class Header extends React.Component {
  constructor(props) {
    super(props);

    this.handleClose = this.handleClose.bind(this);
    this.handleShow = this.handleShow.bind(this);

    this.state = {
      show: false
    };
  }

  handleClose() {
    this.setState({
      show: false
    });
  }

  handleShow() {
    this.setState({
      show: true
    });
  }

  render() {
    // console.log(this.state);

    return (
      <div className="header-container">
        <Button onClick={this.handleShow}>LOGIN</Button>

        <Modal show={this.state.show} onHide={this.handleClose}>
          <Modal.Header closeButton>
            <Modal.Title>Modal Header</Modal.Title>
          </Modal.Header>
          <Modal.Body>Modal Body</Modal.Body>
        </Modal>
      </div>
    );
  }
}
...