React项目中如何实现按钮点击切换选中样式并移除其他按钮的选中态

云上老周

2026-10-23

核心问题

未使用React状态管理按钮选中态，按钮类名静态写死，无逻辑切换不同按钮的选中类，导致点击新按钮时旧选中样式无法自动移除。

完整实现步骤

引入React内置的useState Hook，存储当前选中按钮的唯一标识
给每个submit按钮绑定点击事件，更新状态为当前按钮的标识
动态拼接按钮类名，仅选中按钮追加links-selected类
阻止submit按钮的默认提交行为，避免页面刷新丢失状态

可运行代码示例

import React, { useState } from "react";
import { Form } from "react-bootstrap";
// 未使用的Link导入可删除
// import { Link } from "react-router-dom";

export default function InstantQuoteForm () {
  // 定义状态存储当前选中的按钮标识，需要默认选中某按钮时可直接传入对应标识，例如 useState('button1')
  const [activeBtn, setActiveBtn] = useState('');

  return (
    <Form className="shadow p-3 mb-5">
      <Form.Group controlId="formGroupFrom">
        <button 
          type="submit" 
          className={`links ${activeBtn === 'button1' ? 'links-selected' : ''}`}
          onClick={(e) => {
            // 阻止submit按钮默认的表单提交刷新行为，后续需要提交时可移除该方法
            e.preventDefault();
            setActiveBtn('button1');
          }}
        >
         Button1
        </button>
        <button 
          type="submit" 
          className={`links ${activeBtn === 'button2' ? 'links-selected' : ''}`}
          onClick={(e) => {
            e.preventDefault();
            setActiveBtn('button2');
          }}
        >
          Button2
        </button>
      </Form.Group>
    </Form>
  );
}

样式优化提示

原有样式存在冗余分号，可调整为：

.links-selected {
  display: inline-block;
  background-color: var(--body-color);
  color: var(--second-color);
  padding: 0.75rem 1rem;
  border-radius: 0;
  transition: 0.3s;
  border-bottom: solid var(--first-color);
}