Модальное окно продолжает срабатывать, когда я нажимаю клавишу - PullRequest
Новая
       20

Модальное окно продолжает срабатывать, когда я нажимаю клавишу

0 голосов
/ 04 августа 2020

У меня проблема с проектом, над которым я работаю, из курса React .

Когда я нажимаю правую кнопку и закрываю ее, каждый раз, когда я снова набираю Modal имеет тенденцию открываться автоматически. Кажется, что после закрытия состояние предупреждения между истиной или ложью, но props сохраняет значение true как значение.

Parent 

import "./page-home.css";
import logo from "./download.svg";
import ReactDom from "react-dom";
import Modal from "./components/modal.js";

class PageHome extends React.Component {
  state = {
    busqueda: "",
    modal: false,
  };
  handleSubmit = (e) => {
    e.preventDefault();

    this.props.history.push("/busqueda?" + this.state.busqueda);
  };

  handleClick = (e) => {
    console.log(this.props.estado);
    e.preventDefault(e);
    this.setState({
      modal: true,
    });
  };



  handleChange = (e) => {
    this.setState({
      busqueda: e.target.value,
    });
  };

  render() {
    return (
      <div className="container">
        <div className="row centrado">
          <div className="col-md-6 centrar">
            <img src={logo} alt="" id="logo" />
            <form
              className="form-inline"
              onSubmit={this.handleSubmit}
              name="Resultado de la prueba: "
            >
              <div className="busqueda">
                <input
                  name="busqueda"
                  value={this.state.busqueda}
                  type="text"
                  id="buscar"
                  placeholder="Buscar una banda"
                  onChange={this.handleChange}
                />
              </div>
              <div className="actions">
                <button className="btng">Artistas Similares</button>
                <button className="btng" onClick={this.handleClick}>
                  Acerca del sitio
                </button>
              </div>
            </form>
          </div>
        </div>
        {ReactDom.createPortal(
          <Modal estado={this.state.modal} key={this.state.modal}>
            <p>modal test</p>
            <p>
              Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aliquam
              quae assumenda tempora eius autem corporis quas rerum ad ipsum
              laborum illum suscipit, harum iusto maiores sapiente, eum odio
              laboriosam dolorum?
            </p>
          </Modal>,
          document.getElementById("teleport")
        )}
      </div>
    );
  }
}

export default PageHome;

, и это модальный код 

import "./modal.css";
class Modal extends React.Component {
  state = {
    estado: this.props.estado,
  };

  componentWillReceiveProps(e) {
    this.setState({
      estado: e.estado,
    });
  }
  handleClick = (e) => {
    e.preventDefault();
    this.setState({
      estado: false,
    });
  };

  render() {
    if (this.state.estado !== true) return null;

    return (
      <React.Fragment>
        <div className="modale">
          <div className="cardModal">
            <button className="salir" onClick={this.handleClick}>
              X
            </button>
            {this.props.children}
          </div>
        </div>
      </React.Fragment>
    );
  }
}

export default Modal;

Может быть "this.props.estado" в состоянии из Модального окна проблема? Я здесь новенький, поэтому дайте мне знать, если я могу дать вам больше информации.

1 Ответ

0 голосов
/ 06 августа 2020

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

      <Modal estado={this.state.modal} hide={this.handleHide}>
...