React实现多按钮独立状态切换：前两个支持连接/断开切换

问题核心 #

你现在的问题是两个按钮共用了父组件里的同一个label状态变量，所以点击任何一个都会同步修改这个状态，导致两个按钮一起变。要实现独立切换，得让每个按钮拥有自己的状态，或者让Button组件自己维护状态。

方案一：父组件维护独立状态 #

给前两个按钮分别创建独立的状态，各自绑定对应的状态和更新逻辑：

修改后的App.js #

import React, { useState } from "react";
import './App.css';
import { Button } from './Button.js'

function App(){
  // 给两个可切换按钮分别创建独立状态
  const [label1, setLabel1] = useState('Connect');
  const [label2, setLabel2] = useState('Connect');
  const labelPurchase = "PURCHASE";

  // 封装切换逻辑，避免重复写代码
  const toggleLabel = (currentLabel, setLabel) => {
    setLabel(currentLabel === 'Connect' ? 'Disconnect' : 'Connect');
  }

  return(
    <>
      <Button 
        label={label1} 
        onClick={() => toggleLabel(label1, setLabel1)} 
      />
      
      <Button 
        label={label2} 
        onClick={() => toggleLabel(label2, setLabel2)} 
      />

      <Button label={labelPurchase} />
    </>
  )
}

export default App;

修改后的Button.js #

import React from "react";
import './Button.css';

// Button组件只负责渲染和触发点击回调，状态逻辑交给父组件
export const Button = ({ label, onClick }) => {
  return (
    <button onClick={onClick}> {label} </button>
  )
}

方案二：Button组件内部维护状态（更推荐） #

让Button组件自己管理切换状态，父组件只需要传递初始值和是否允许切换的标识，这样组件复用性更强：

修改后的Button.js #

import React, { useState } from "react";
import './Button.css';

export const Button = ({ initialLabel = 'Connect', isToggleable = true }) => {
  const [label, setLabel] = useState(initialLabel);

  const handleClick = () => {
    // 非可切换按钮点击无反应
    if (!isToggleable) return;
    // 切换状态
    setLabel(prev => prev === 'Connect' ? 'Disconnect' : 'Connect');
  }

  return (
    <button onClick={handleClick}> {label} </button>
  )
}

修改后的App.js #

import React from "react";
import './App.css';
import { Button } from './Button.js'

function App(){
  return(
    <>
      {/* 两个可切换按钮，默认初始显示Connect */}
      <Button />
      <Button />
      {/* 不可切换的按钮，指定初始标签并关闭切换功能 */}
      <Button initialLabel="PURCHASE" isToggleable={false} />
    </>
  )
}

export default App;

补充说明 #

• 方案一适合需要父组件统一控制按钮状态的场景（比如批量重置按钮显示文本）。
• 方案二更符合组件封装的原则，每个按钮独立管理自身状态，代码更简洁，复用性更高。

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