我是react的初学者，试图获得全屏覆盖导航，下面是我的jsx文件代码。为什么单击“打开”选项后导航菜单不显示？

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import './navbar.css';
import Dom2react from 'dom-to-react';
class Navbar extends Component{
  constructor() {
    super();
    this.openNav = this.openNav.bind(this);
    this.closeNav = this.closeNav.bind(this);
  }
  openNav=()=> {
    document.getElementById("myNav").style.height = '100%';
  }
  closeNav=()=> {
    document.getElementById("myNav").style.height = '0%';
  }
  render(){
    return(
    <div className="App">
    <div id="myNav" className="overlay">
      <a href="#!" className="closebtn" onClick={this.closeNav}>&times;</a>
      <div className="overlay-content">
        <a href="#">About</a>
        <a href="#">Services</a>
        <a href="#">Clients</a>
        <a href="#">Contact</a>
      </div>
    </div>
     <span style={{fontSize: '30px', cursor: 'pointer'}} onClick={this.openNav}>☰ open</span>
</div>
);
}
}

export default Navbar;