ReactJS切换按钮异常：需双击才能切换激活状态求助

我看到你的切换逻辑出现了双击才能激活第二个按钮的问题，主要有两个关键问题导致了这个异常：

1. 未初始化状态变量 #

你的组件中使用了clicked和setClick，但没有通过useState声明并初始化这个状态。React中未初始化的状态默认是undefined，这会导致后续的取反逻辑出现异常。

2. 第二个按钮的点击逻辑错误 #

第二个按钮的onClick使用了setClick(!clicked)，当初始状态是undefined时，!undefined会返回true——这意味着第一次点击第二个按钮后，clicked会被设置为true，而根据你的className规则，此时第二个按钮会应用disable-btn类（因为clicked ? 'disable-btn':'active-btn'），所以它依然是禁用状态。必须再点击一次，!true得到false，才会切换到激活状态。

修复后的完整代码 #

React组件代码 #

import React, { useState } from 'react'
import { Link as LinkR } from 'react-router-dom'
import './SectionConnect.css'

const SectionConnect = () => {
  // 初始化状态，默认第一个按钮激活
  const [clicked, setClick] = useState(true)

  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">
          <LinkR 
            to='/' 
            onClick={() => setClick(true)} 
            className={clicked ? 'active-btn':'disable-btn'}
          >
            For companies
          </LinkR>
          <LinkR 
            to='/forIndividuals' 
            onClick={() => setClick(false)} 
            className={clicked ? 'disable-btn':'active-btn'}
          >
            For individuals
          </LinkR>
        </div>
      </div>
    </div>
  )
}

export default SectionConnect

CSS代码（保持不变） #

.connect-btn {
  display: flex;
  justify-content: space-around;
  padding: 8px 8px 6px 10px;
  background: #FAFAFC;
  border-radius: 78px;
  width: 58%;
  height: 50px;
}
.disable-btn {
  font-family: Sofia Pro;
  font-style: normal;
  font-weight: 600;
  font-size: 16px;
  line-height: 140%;
  color: #435473;
  padding: 4px 8px 0px 16px;
  border-radius: 74px;
  text-decoration: none;
}
.active-btn {
  padding: 8px 8px 0px 16px;
  background: #5582A7;
  border-radius: 74px;
  font-family: Sofia Pro;
  font-style: normal;
  font-weight: 600;
  font-size: 16px;
  line-height: 140%;
  color: #FFFFFF;
  text-decoration: none;
}

修复说明 #

• 新增了const [clicked, setClick] = useState(true)，初始化状态为true，确保页面加载时第一个按钮默认激活。
• 把第二个按钮的onClick从setClick(!clicked)改为setClick(false)，这样点击第二个按钮时直接将状态设置为false，立刻切换到激活状态，同时第一个按钮变为禁用状态，无需双击。

这样修改后，按钮的切换逻辑就会正常工作，点击任意一个按钮都会立刻激活自身并禁用另一个按钮。

内容的提问来源于stack exchange，提问作者WanaveSurekha