我正在使用 react，我试图简单地显示我的弹出窗口 onclick 但我有这个错误

Uncaught TypeError: Cannot set property 'onclick' of null
    at eval (index.js:33)
    at Object../src/index.js (main.js:680)
    at __webpack_require__ (main.js:20)
    at eval (index.js:9)
    at Object../examples/src/index.js (main.js:97)
    at __webpack_require__ (main.js:20)
    at eval (webpack:///multi_(:3001/webpack)-dev-server/client?:2:18)
    at Object.0 (main.js:702)
    at __webpack_require__ (main.js:20)
    at main.js:84

这是我的完整 index.js

import React from 'react';
import './style.scss';
import ReactDOM from "react-dom";

const modal = document.getElementById('myModal');

const btn = document.getElementById("myBtn");

const span = document.getElementsByClassName("close")[0];

btn.onclick = function() {
    modal.style.display = "block";
};

span.onclick = function() {
    modal.style.display = "none";
};

window.onclick = function(event) {
    if (event.target === modal) {
        modal.style.display = "none";
    }
};

class MyComponent extends React.Component {



    constructor(props) {
        super(props);
        this.state = {value: ''};

        this.handleChange = this.handleChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
    }

    handleChange(event) {
        this.setState({value: event.target.value});
    }



    handleSubmit(event) {
        alert('A name was submitted: ' + this.state.value);
        event.preventDefault();
    }

    render() {
        return (
            <div style={{margin:'auto', float:'none'}}>

                <button id="myBtn">Open Modal</button>
                <div id="myModal" className="modal">
                    <div className="modal-content">
                        <span className="close">&times;</span>
                        <p>Some text in the Modal..</p>
                    </div>

                </div>

                <table cellSpacing="0" cellPadding="0" style={{margin:'0 auto',marginBottom:'2rem'}}>
                    <thead>
                    <tr>
                        <td>
                    <span
                        style={{
                            height: '100px',
                            width: '100px',
                            backgroundColor: 'darkgrey',
                            borderRadius: '50%',
                            display: 'inline-block'
                        }}/>
                        </td>
                        <td style={{color:'#2c4e88'}}>
                            <h1><p>swedavia</p></h1>
                            <h2><p>swedish airports</p></h2>
                        </td>
                    </tr>
                    </thead>
                </table>


                <form onSubmit={this.handleSubmit}>
                    <div style={{color:'darkgrey',padding: '16px'}}>
                        <label htmlFor="uname">Username</label>
                        <input type="text" value={this.state.value} onChange={this.handleChange} />
                        <label htmlFor="psw">Password</label>
                        <input type="password" name="psw" required/>
                        <div style={{marginTop:'2rem'}}>
                            <button type="submit">ОТПРАВИТЬ</button>
                            <span style={{float: 'right',paddingTop: '16px'}}><a href="#">Forgot password?</a></span>
                        </div>
                    </div>
                </form>

            </div>
        );
    }
}

export default MyComponent;

ReactDOM.render(
    <MyComponent />,
    document.getElementById('root')
);

我不明白为什么我会有这个错误，请帮帮我！

也许是因为我使用的是简单的 javascript...

抱歉，如果这是一个愚蠢的问题...但有时我真的不明白简单的事情。