如何优化JavaScript按钮状态管理代码，实现更简洁优雅的写法？

Hey there! Your current code works for managing button states, but as you noticed, it's full of repetitive logic—adding a sixth button would mean writing another almost identical function, which isn't ideal. Let's look at some cleaner, more maintainable approaches:

Approach 1: Track Active Button with a Single Variable #

Instead of using separate boolean variables for each button, use one variable to store the identifier of the currently active button. This cuts down on redundant code dramatically:

// Initialize with the first button active
let activeButton = 'buttonOne';

// Universal click handler for all buttons
const handleButtonClick = (buttonId) => {
  activeButton = buttonId;
};

How to use this: #

• When you need to check if a button is active, just compare activeButton === 'buttonOne' (or whichever button you're checking).
• To trigger the state change, call handleButtonClick('buttonThree') for example—no need to write a unique function per button.

Approach 2: Use an Object for State (If You Need Individual Booleans) #

If your project relies on keeping individual boolean variables for each button, wrap them in an object and use a universal function to update states:

// Centralize all button states in an object
const buttonStates = {
  buttonOne: true,
  buttonTwo: false,
  buttonThree: false,
  buttonFour: false,
  buttonFive: false
};

// Function to set a single button as active (others inactive)
const setActiveButton = (activeBtnKey) => {
  // Reset all buttons to inactive
  Object.keys(buttonStates).forEach(key => {
    buttonStates[key] = false;
  });
  // Activate the target button
  buttonStates[activeBtnKey] = true;
};

// Example usage: Activate buttonFour
setActiveButton('buttonFour');

Why this works better: #

• Adding a new button only requires adding a key-value pair to buttonStates—no new function needed.
• All state update logic lives in one place, making it easier to debug or modify later.

Bonus: Framework-Specific Shortcut (e.g., React) #

If you're working in a framework like React, you can leverage state hooks to make this even simpler:

import { useState } from 'react';

// Use useState to track the active button
const [activeButton, setActiveButton] = useState('buttonOne');

// In your JSX, attach the handler like this:
// <button onClick={() => setActiveButton('buttonTwo')}>Button Two</button>

This eliminates manual state reset entirely—React handles the state update for you, and you just pass the desired button identifier.

All these approaches reduce repetition, improve maintainability, and make your code much more elegant. Pick the one that fits your project's existing structure best!

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