React中onClick与原生onclick冲突导致按钮重复触发函数的问题求助

大家好，我最近遇到一个React按钮事件的坑，折腾了好久没搞定，想请教下各位大佬。

我有一个按钮，还有两个函数closeOnClick和openOnClick，一开始给按钮的React onClick属性绑定了openOnClick，想着在这个函数执行完逻辑后，把按钮的原生onclick改成closeOnClick，这样下次点击就能切换状态了。结果没想到，第二次点击按钮的时候，openOnClick和closeOnClick居然同时执行了！

最初的代码是这样的：

function closeOnClick() {
  let sidebar: HTMLElement = document.getElementsByClassName("list-items")[0] as HTMLElement;
  let btn: HTMLElement = document.getElementsByClassName("open-sidebar-btn")[0] as HTMLElement;
  sidebar.classList.remove('show');
  btn.onclick = openOnClick;
  console.log('closed menu and changed onclick to close')
}

function openOnClick() {
  let sidebar: HTMLElement = document.getElementsByClassName("list-items")[0] as HTMLElement;
  let btn: HTMLElement = document.getElementsByClassName("open-sidebar-btn")[0] as HTMLElement;
  sidebar.classList.add('show');
  btn.onclick = closeOnClick;
  console.log('opened menu and changed onclick to close')
}

<button className="open-sidebar-btn" onClick={openOnClick}> click me </button>

后来我测试发现，原来React的onClick和原生DOM的onclick是两个完全不同的属性！这就相当于按钮上同时绑定了两个事件处理函数，点击的时候自然会先后触发，导致两个函数都跑起来了。

我试着想直接修改React的onClick属性，但发现它并不是DOM元素的属性，根本改不了。于是我又想在openOnClick里加个全局状态变量来控制执行逻辑：

let closed = true;

function closeOnClick() {
  let sidebar: HTMLElement = document.getElementsByClassName("list-items")[0] as HTMLElement;
  let btn: HTMLElement = document.getElementsByClassName("open-sidebar-btn")[0] as HTMLElement;
  sidebar.classList.remove('show');
  // btn.onclick = openOnClick;
  console.log('closed menu and changed onclick to close')
  closed = true
}

function openOnClick() {
  let sidebar: HTMLElement = document.getElementsByClassName("list-items")[0] as HTMLElement;
  let btn: HTMLElement = document.getElementsByClassName("open-sidebar-btn")[0] as HTMLElement;
  if (closed) {
    sidebar.classList.add('show');
    btn.onclick = closeOnClick;
    console.log('opened menu and changed onclick to close')
    closed = false;
  }
}

结果发现好像React的onClick会在原生onclick之后执行，这个状态判断还是没起到预期的作用，问题依然存在。

后来我想到用React的useState来管理状态，毕竟React是状态驱动的，但不知道是不是因为状态更新有延迟，或者我用法不对，反而把问题搞得更复杂了，现在完全不知道该怎么处理了。

有没有大佬能指点一下，这种情况下应该怎么正确实现按钮点击切换侧边栏显示/隐藏的功能，避免事件冲突的问题呀？

内容来源于stack exchange