当我按下一个键时，模态一直触发答案

【问题标题】：Modal keeps triggering when I press a key当我按下一个键时，模态一直触发
【发布时间】：2020-08-04 16:41:20
【问题描述】：

我正在通过React course 处理的项目遇到问题。

当我单击右键并关闭它时，每次我再次键入时，Modal 都会自动打开。似乎在关闭 true 或 false 之间的警报状态后，props 保持 true 作为值。

父母

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”状态下的 Modal 问题？我是新来的，如果我可以给你更多信息，请告诉我。

【问题讨论】：

标签： javascript reactjs modal-dialog

【解决方案1】：

设法解决它。我只是将关闭函数从子组件移到父组件，并将值保存在将接收子组件的新道具中。

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

【讨论】：