React中能否将相似的onClick事件合并为一个动态处理函数？

Hey there! It’s totally normal to end up with repetitive handler functions when you’re starting out with React state management, but we can absolutely clean this up to make your code more scalable and easier to maintain. Let’s look at two solid solutions depending on your use case:

Option 1: Generic Toggle Function (for independent visibility) #

If you need to keep each component’s visibility independent (meaning multiple can be shown/hidden at the same time), this single reusable handler will eliminate all that duplicate code.

Step 1: Replace your multiple handlers with one generic function #

toggleVisibility = (visibilityKey) => {
  // Use functional setState to safely update based on the previous state
  this.setState(prevState => ({
    [visibilityKey]: !prevState[visibilityKey]
  }));
};

Step 2: Pass the corresponding state key when triggering clicks #

Instead of calling separate createSection() or createPractice() methods, just pass the exact state property name to your generic handler:

<button onClick={() => this.toggleVisibility('sectionVisilibity')}>Section</button>
<li onClick={() => this.toggleVisibility('practiceVisilibity')}>Practice</li>
<li onClick={() => this.toggleVisibility('testVisilibity')}>Test</li>

Quick note: You might want to fix the typo in your state keys (Visilibity → Visibility) to avoid confusion down the line!

Option 2: Track Active Component (for mutually exclusive visibility) #

If only one component should be visible at a time (clicking one hides the others), this approach is even cleaner. Instead of multiple boolean state properties, use a single value to track which component is active.

Step 1: Update your initial state #

state = {
  activeComponent: null // Can be 'section', 'practice', 'test', or null to hide all
};

Step 2: Create a single handler to toggle the active component #

toggleActiveComponent = (componentName) => {
  this.setState(prevState => ({
    // If the component is already active, set to null to hide it; otherwise activate it
    activeComponent: prevState.activeComponent === componentName ? null : componentName
  }));
};

Step 3: Render components based on the active state #

Instead of checking each boolean, just compare against the activeComponent value:

{this.state.activeComponent === 'section' && <SectionComponent />}
{this.state.activeComponent === 'practice' && <PracticeComponent />}
{this.state.activeComponent === 'test' && <TestComponent />}

Step 4: Trigger the handler with the component name #

<button onClick={() => this.toggleActiveComponent('section')}>Section</button>
<li onClick={() => this.toggleActiveComponent('practice')}>Practice</li>
<li onClick={() => this.toggleActiveComponent('test')}>Test</li>

This approach cuts down on redundant state properties and makes adding new components later trivial—no extra handler functions needed!

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