Блог

Я хочу реализовать a modal box в React и выполнить, следуя руководству из W3Schools. Модальное — это диалоговое окно / всплывающее окно, которое отображается поверх текущей страницы:

Но у меня есть error . Вот ошибка и коды:

1. Ошибка:

2. App.js:

 import './App.css';

function App() {

  // Get the modal
  var modal = document.getElementById("myModal");

  // Get the button that opens the modal
  var btn = document.getElementById("myBtn");

  // Get the <span> element that closes the modal
  var span = document.getElementsByClassName("close")[0];

  // When the user clicks the button, open the modal 
  btn.onclick = function() {
    modal.style.display = "block";
  }

  // When the user clicks on <span> (x), close the modal
  span.onclick = function() {
    modal.style.display = "none";
  }

  // When the user clicks anywhere outside of the modal, close it
  window.onclick = function(event) {
    if (event.target == modal) {
      modal.style.display = "none";
    }
  }
  
  return (
    <>
      <div className="topnav" id="myTopnav">
        <a href="#home" className="active">Forum Anak IT</a>
        <a href="#" id="myBtn" className="button">Login</a>
      </div>

      <div id="myModal" className="modal">
        <div className="modal-content">
          <span className="close">amp;times;</span>
          <p>Some text in the Modal..</p>
        </div>
      </div>
    </>
  );
}
}

export default App;
  

Вы должны использовать state для управления состоянием открытия и закрытия вашего модального и запуска события onClick на вашей кнопке.

 function App() {

 const [open,setOpen]=useState(false);
  
  return (
    <>
      <div className="topnav" id="myTopnav">
        <a href="#home" className="active">Forum Anak IT</a>
        <a href="#" id="myBtn" className="button" onClick={()=>{setOpen(true}}>Login</a>
      </div>
 { open amp;amp;
      <div id="myModal" className="modal">
        <div className="modal-content">
          <span className="close">amp;times;</span>
          <p>Some text in the Modal..</p>
        </div>
       <button onClick={()=>{setOpen(false)}}>Close</button>
      </div>
}
    </>
  );
}
}

export default App;
  

Я беру код из ответа @SiddhantVarma, изменяю и добавляю то, чего не хватает:

 import {useState} from "react"

function App() {

 const [hidden, setHidden] = useState(true);
  
  return (
    <>
      <div className="topnav" id="myTopnav">
        <a href="#home" className="active">Forum Anak IT</a>
        <a href="#" id="myBtn" className="button" onClick={()=>{setOpen(true}}>Login</a>
      </div>
 {hidden ? (
        <></>
      ) : (
      <div id="myModal" className="modal">
        <div className="modal-content">
          <span className="close">amp;times;</span>
          <p>Some text in the Modal..</p>
        </div>
       <button onClick={() => setHidden(true)}>Close</button>
      </div>
}
    </>
  );
}
}