React中点击Bootstrap按钮时修改其CSS样式的实现方法（多按钮场景）

Got it, let's break this down step by step. You need to control three Bootstrap buttons (word, para, sentence) with specific click behaviors:

• Clicking word changes its color
• Clicking sentence changes its color
• Clicking para toggles its color on/off

Here's a clean, React-friendly implementation using state to track button status and dynamic Bootstrap classes:

Step 1: Set Up State and Import Bootstrap #

First, make sure you've installed Bootstrap (via npm install bootstrap) and imported its CSS in your component. We'll use React's useState hook to track which buttons are "active" (colored):

import React, { useState } from 'react';
import 'bootstrap/dist/css/bootstrap.min.css'; // Required for Bootstrap styles

const ButtonColorController = () => {
  // Track active state for each button (false = default color, true = active color)
  const [activeButtons, setActiveButtons] = useState({
    word: false,
    para: false,
    sentence: false
  });

Step 2: Create a Click Handler Function #

This function will update the state based on which button is clicked. We'll handle para differently (toggle its state) while setting word and sentence to active on click (adjustable if you want them to toggle too):

const handleButtonClick = (buttonType) => {
    setActiveButtons(prevState => {
      if (buttonType === 'para') {
        // Toggle para's state: active ↔ inactive
        return { ...prevState, para: !prevState.para };
      } else {
        // Set word/sentence to active (keep other states as-is)
        return { ...prevState, [buttonType]: true };
        
        // Optional: If you want word/sentence to TOGGLE instead of just activate, use this line instead:
        // return { ...prevState, [buttonType]: !prevState[buttonType] };
        
        // Optional: If word/sentence should be MUTUALLY EXCLUSIVE (only one active at a time), use this:
        // return {
        //   word: buttonType === 'word',
        //   para: prevState.para,
        //   sentence: buttonType === 'sentence'
        // };
      }
    });
  };

Step 3: Dynamic Button Classes #

Create a helper function to return the correct Bootstrap class based on the button's active state. We'll use btn-primary for active (colored) buttons and btn-secondary for default (gray) buttons—swap these for other Bootstrap classes like btn-success or btn-danger if you prefer:

const getButtonClass = (buttonType) => {
    return activeButtons[buttonType] 
      ? 'btn btn-primary m-2' // Active color
      : 'btn btn-secondary m-2'; // Default color
  };

Step 4: Render the Buttons #

Map each button to its state and click handler:

return (
    <div className="container mt-4">
      <button
        className={getButtonClass('word')}
        onClick={() => handleButtonClick('word')}
      >
        word
      </button>
      <button
        className={getButtonClass('para')}
        onClick={() => handleButtonClick('para')}
      >
        para
      </button>
      <button
        className={getButtonClass('sentence')}
        onClick={() => handleButtonClick('sentence')}
      >
        sentence
      </button>
    </div>
  );
};

export default ButtonColorController;

Key Notes #

• Customization: Swap btn-primary/btn-secondary with any Bootstrap button variant to match your design.
• Toggle Behavior: If you want word and sentence to toggle their colors (not just set to active), use the commented line in the click handler.
• Mutual Exclusivity: If clicking word should deactivate sentence (and vice versa), use the mutually exclusive state update logic provided.

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