Javascript React js添加面板事件问题

我是反应JS的初学者，我为我的反应项目添加了一些面板，我在按钮事件上遇到了一些冲突，当点击按钮面板没有打开时， 有人知道如何正确添加这个吗

这是我的密码。 index.js

import React, { Component } from 'react';
import { render } from 'react-dom';
import Hello from './Hello';
import './style.css';

class App extends Component {
  constructor() {
    super();
    this.state = {
      name: 'React'
    };
  }

  render() {
    return (
      <div>
       <div id="mySidepanel" class="sidepanel">
        <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
        <a href="#">About</a>
        <a href="#">Services</a>
        <a href="#">Clients</a>
        <a href="#">Contact</a>
      </div>
      <button class="openbtn" onclick="openNav()">☰ Toggle Sidepanel</button>
     </div>

    );
  }
}

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

import React from 'react';

export default ({ name }) => <h1>Hello {name}!</h1>;
function openNav() {
  document.getElementById("mySidepanel").style.width = "250px";
}

function closeNav() {
  document.getElementById("mySidepanel").style.width = "0";
}

import React，{Component}来自'React'；
从'react dom'导入{render}；
从“./Hello”导入Hello；
导入“/style.css”；
类应用程序扩展组件{
构造函数（）{
超级（）；
此.state={
名称：“反应”
};
}
render（）{
返回(
☰ 切换侧面板
);
}
}
render（
在react中，通常不直接修改DOM元素，而只是以当前所需的形式呈现它们。组件的状态或属性发生更改时，将再次调用
render
函数。（此外，在react中，您使用
className=
代替
class=
，使用
onClick={function}
代替
onClick=“code”
）

import React，{Component}来自'React'；
从'react dom'导入{render}；
从“./Hello”导入Hello；
导入“/style.css”；
类应用程序扩展组件{
构造函数（）{
超级（）；
此.state={
名称：'反应'，
侧面板打开：错误，
};
}
render（）{
返回(
this.setState（{sidepanelOpen:true}}>☰ 切换侧面板
);
}
}
render（，document.getElementById（'root'））；
在react中，通常不直接修改DOM元素，而只是以当前所需的形式呈现它们。组件的状态或属性发生变化时，
呈现
函数将被再次调用。（此外，在react中，您使用
类名=
而不是
类=
，并且
单击={function}
而不是
onclick=“code”
）

import React，{Component}来自'React'；
从'react dom'导入{render}；
从“./Hello”导入Hello；
导入“/style.css”；
类应用程序扩展组件{
构造函数（）{
超级（）；
此.state={
名称：'反应'，
侧面板打开：错误，
};
}
render（）{
返回(
this.setState（{sidepanelOpen:true}}>☰ 切换侧面板
);
}
}
render（，document.getElementById（'root'））；
使用React元素处理事件与处理DOM元素上的事件非常相似。存在一些语法差异：
例如，在HTML中：

<button onclick="activateLasers()">
  Button
</button>


按钮

对于react：

<button onClick={activateLasers}>
  Activate Lasers
</button>


激活激光

就你而言：
用于打开侧面板

 <button class="openbtn" onClick={this.openNav}>☰ Toggle Sidepanel</button>

☰ 切换侧面板

用于关闭侧面板

    <a href="javascript:void(0)" class="closebtn" onClick={this.closeNav}>×</a>



并将函数放在同一个组件中

最终代码如下所示：

class App extends Component {
  constructor() {
    super();
    this.state = {
      name: 'React'
    };
  }
  openNav = () => {
    document.getElementById("mySidepanel").style.width = "250px";
  }
 closeNav = () => {
  document.getElementById("mySidepanel").style.width = "0";
}
  render() {
    return (
      <div>
       <div id="mySidepanel" class="sidepanel">
        <a href="javascript:void(0)" class="closebtn" onClick={this.closeNav}>×</a>
        <a href="#">About</a>
        <a href="#">Services</a>
        <a href="#">Clients</a>
        <a href="#">Contact</a>
      </div>
      <button class="openbtn" onClick={this.openNav}>☰ Toggle Sidepanel</button>
     </div>
    );
  }
}

类应用程序扩展组件{
构造函数（）{
超级（）；
此.state={
名称：“反应”
};
}
openNav=（）=>{
document.getElementById（“mySidepanel”）.style.width=“250px”；
}
closeNav=（）=>{
document.getElementById（“mySidepanel”）.style.width=“0”；
}
render（）{
返回(
☰ 切换侧面板
);
}
}
使用React元素处理事件与处理DOM元素上的事件非常相似。存在一些语法差异：
例如，在HTML中：

<button onclick="activateLasers()">
  Button
</button>


按钮

对于react：

<button onClick={activateLasers}>
  Activate Lasers
</button>


激活激光

就你而言：
用于打开侧面板

 <button class="openbtn" onClick={this.openNav}>☰ Toggle Sidepanel</button>

☰ 切换侧面板

用于关闭侧面板

    <a href="javascript:void(0)" class="closebtn" onClick={this.closeNav}>×</a>



并将函数放在同一个组件中

最终代码如下所示：

class App extends Component {
  constructor() {
    super();
    this.state = {
      name: 'React'
    };
  }
  openNav = () => {
    document.getElementById("mySidepanel").style.width = "250px";
  }
 closeNav = () => {
  document.getElementById("mySidepanel").style.width = "0";
}
  render() {
    return (
      <div>
       <div id="mySidepanel" class="sidepanel">
        <a href="javascript:void(0)" class="closebtn" onClick={this.closeNav}>×</a>
        <a href="#">About</a>
        <a href="#">Services</a>
        <a href="#">Clients</a>
        <a href="#">Contact</a>
      </div>
      <button class="openbtn" onClick={this.openNav}>☰ Toggle Sidepanel</button>
     </div>
    );
  }
}

类应用程序扩展组件{
构造函数（）{
超级（）；
此.state={
名称：“反应”
};
}
openNav=（）=>{
document.getElementById（“mySidepanel”）.style.width=“250px”；
}
closeNav=（）=>{
document.getElementById（“mySidepanel”）.style.width=“0”；
}
render（）{
返回(
☰ 切换侧面板
);
}
}
你可以试试@PRK谢谢你的指导，请保留帖子答案部分，我可以投票你可以试试@PRK谢谢你的指导，请保留帖子答案部分，我可以投票，谢谢你宝贵的指导sir，谢谢你宝贵的指导