在reactjs中切换开关

问题描述

当我禁用第二个按钮时，我正在启用第一个按钮。这是可行的，但不能正常进行。 我需要双击第二个按钮以启用第二个按钮并禁用第一个按钮。 我做了很多调试和搜索，但是我找不到我要去哪里。任何帮助将不胜感激。预先感谢！

反应js代码

body {
   scroll-behavIoUr: smooth;
}

CSS代码

<a href="#aboutus">Go to about us</a>

解决方法

您可以将NavLink与activeClassName结合使用，以实现所需的功能，而无需使用本地组件状态。

import React from "react";
import { BrowserRouter as Router,NavLink } from "react-router-dom";
import './SectionConnect.css';

const SectionConnect = () => {
  return (
    <div className="connect-container">
      <div className="connect-wrapper">
        <h2>How it works</h2>
        <p>
          We connect you with the very best practitioners and most effective
          methods to achieve optimal health.
        </p>
        <div className="connect-btn">
          <NavLink
            to="/"
            exact
            activeClassName="active-btn"
            className="disable-btn"
          >
            For companies
          </NavLink>
          <NavLink
            to="/forIndividuals"
            exact
            activeClassName="active-btn"
            className="disable-btn"
          >
            For individuals
          </NavLink>
        </div>
      </div>
    </div>
  );
};