使用react-router之后，onClick事件不会在第一次触发该函数，并且在此之后可以正常工作

问题描述

当我不在browserRouter和Route中使用React时，它在React上工作正常，在使用react-router之后，onClick事件不会在第一次触发该函数，并且此后可以正常工作

这是我需要在onClick上触发的功能

function clickHandler() {
    
const signUp = document.getElementById("signUp");
const signIn = document.getElementById("signIn");
const container = document.getElementById("container");

signUp.addEventListener("click",() => {
  container.classList.add("right-panel-active");
});

signIn.addEventListener("click",() => {
  container.classList.remove("right-panel-active");
});

    }

这是我正在渲染的表单的代码

      <div className="container" id="container">
        <div className="form-container sign-up-container">
          <form action="#">
        </div>
        <div className="form-container sign-in-container">
            <button>Sign In</button>
          </form>
        </div>
        **<div onClick={clickHandler} className="overlay-container">**
          <div className="overlay">
            <div className="overlay-panel overlay-left">
              <button className="changeForm" id="signIn">
                Sign In
              </button>
            </div>
            <div className="overlay-panel overlay-right">
              <button className="changeForm" id="signUp">
                Sign Up
              </button>
            </div>
          </div>
        </div>

-反应路由器代码--

  function App() {
      return (
            <Router>
             <Fragment className = "App">
              <Route exact path = "/form" component = {AuthForm} />
             </Fragment>
            </Router>
             );
                }

解决方法

点击事件应通过提供的综合事件进行注册。

// React function component
const ComponentA = () => {
    // Create on click function using useCallback (function component ONLY)
    // This ensures the function is not recreated on each rerender.
    const onButtonClick = React.useCallback((event) => {
        alert('Button Clicked')
    },[]);

    // Render view (attaching on click function to the button)
    return (
        <button
            onClick={onButtonClick}
        >
            Test
        </button>
    )
};