Javascript ReactJS TypeError:无法设置属性'；onclick'；空的

我想在React and done to中实现一个

模式框

，以遵循来自的教程。模式是显示在当前页面顶部的对话框/弹出窗口：

但是我有

错误

。以下是错误和代码：

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">&times;</span>
          <p>Some text in the Modal..</p>
        </div>
      </div>
    </>
  );
}
}

export default App;

import'/App.css'；
函数App（）{
//获取模态
var modal=document.getElementById（“myModal”）；
//获取打开模式对话框的按钮
var btn=document.getElementById（“myBtn”）；
//获取关闭模态的元素
var span=document.getElementsByClassName（“关闭”）[0]；
//当用户单击该按钮时，打开模式对话框
btn.onclick=函数（）{
modal.style.display=“块”；
}
//当用户单击（x）时，关闭模式对话框
span.onclick=函数（）{
modal.style.display=“无”；
}
//当用户单击模式之外的任何位置时，将其关闭
window.onclick=函数（事件）{
如果（event.target==模态）{
modal.style.display=“无”；
}
}
返回(
&时代；
模态中的一些文本

);
}
}
导出默认应用程序；

您应该使用状态来管理模式的打开和关闭状态，并在按钮上触发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 &&
      <div id="myModal" className="modal">
        <div className="modal-content">
          <span className="close">&times;</span>
          <p>Some text in the Modal..</p>
        </div>
       <button onClick={()=>{setOpen(false)}}>Close</button>
      </div>
}
    </>
  );
}
}

export default App;

函数应用程序（）{
const[open，setOpen]=useState（false）；
返回(
{打开&&
&时代；
模态中的一些文本

{setOpen（false）}>Close
}
);
}
}
导出默认应用程序；

您应该使用状态来管理模式的打开和关闭状态，并在按钮上触发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 &&
      <div id="myModal" className="modal">
        <div className="modal-content">
          <span className="close">&times;</span>
          <p>Some text in the Modal..</p>
        </div>
       <button onClick={()=>{setOpen(false)}}>Close</button>
      </div>
}
    </>
  );
}
}

export default App;

函数应用程序（）{
const[open，setOpen]=useState（false）；
返回(
{打开&&
&时代；
模态中的一些文本

{setOpen（false）}>Close
}
);
}
}
导出默认应用程序；

我从@SiddhantVarma answer中获取了代码，修改并添加了缺失的内容：

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">&times;</span>
          <p>Some text in the Modal..</p>
        </div>
       <button onClick={() => setHidden(true)}>Close</button>
      </div>
}
    </>
  );
}
}

从“react”导入{useState}
函数App（）{
const[hidden，setHidden]=useState（true）；
返回(
{隐藏(
) : (
&时代；
模态中的一些文本

setHidden（true）}>关闭
}
);
}
}

我从@SiddhantVarma answer中获取了代码，修改并添加了缺失的内容：

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">&times;</span>
          <p>Some text in the Modal..</p>
        </div>
       <button onClick={() => setHidden(true)}>Close</button>
      </div>
}
    </>
  );
}
}

从“react”导入{useState}
函数App（）{
const[hidden，setHidden]=useState（true）；
返回(
{隐藏(
) : (
&时代；
模态中的一些文本

setHidden（true）}>关闭
}
);
}
}

你能把它放在codesandbox上并共享链接，这样我就可以看到缺失的内容吗？你能把它放在codesandbox上并共享链接，这样我就可以看到缺失的内容吗？