按钮高亮切换问题：实现单按钮独立切换及多按钮互斥高亮

看起来你遇到的问题是所有按钮共用了同一个状态变量，所以才会一点击就全部同步变化～别担心，我们只需要调整状态的存储方式，给每个按钮分配唯一标识，就能轻松实现你想要的效果啦！

方案一：互斥单选（同一时间仅一个按钮高亮） #

这个方案完全符合你描述的“选中的按钮高亮，点击另一个按钮时自动取消之前的高亮”需求，同时点击当前高亮的按钮还能取消它的激活状态。

步骤1：修改状态存储方式 #

把原来单一的isActive布尔值，改成存储当前激活按钮的唯一ID（可以是字符串、数字，只要每个按钮不一样就行），初始值设为null（表示没有按钮激活）：

const [activeButtonId, setActiveButtonId] = useState(null);

步骤2：更新点击事件处理函数 #

让处理函数接收按钮ID作为参数，判断点击的按钮是否是当前激活的：

• 如果是，就取消激活（把状态设为null）
• 如果不是，就把状态切换为这个按钮的ID

const handleButtonClick = (buttonId) => {
  setActiveButtonId(prevId => prevId === buttonId ? null : buttonId);
};

步骤3：渲染独立控制的按钮 #

给每个按钮设置唯一ID，然后根据activeButtonId是否等于当前按钮的ID来判断样式：

return (
  <View>
    {/* 按钮1 */}
    <Pressable
      style={{
        backgroundColor: activeButtonId === 'btn1' ? 'orange' : 'white',
        padding: 8,
        marginVertical: 4,
        borderRadius: 4
      }}
      onPress={() => handleButtonClick('btn1')}
    >
      <Text style={{color: activeButtonId === 'btn1' ? 'white' : 'black'}}>Button 1</Text>
    </Pressable>

    {/* 按钮2 */}
    <Pressable
      style={{
        backgroundColor: activeButtonId === 'btn2' ? 'orange' : 'white',
        padding: 8,
        marginVertical: 4,
        borderRadius: 4
      }}
      onPress={() => handleButtonClick('btn2')}
    >
      <Text style={{color: activeButtonId === 'btn2' ? 'white' : 'black'}}>Button 2</Text>
    </Pressable>

    {/* 按钮3 */}
    <Pressable
      style={{
        backgroundColor: activeButtonId === 'btn3' ? 'orange' : 'white',
        padding: 8,
        marginVertical: 4,
        borderRadius: 4
      }}
      onPress={() => handleButtonClick('btn3')}
    >
      <Text style={{color: activeButtonId === 'btn3' ? 'white' : 'black'}}>Button 3</Text>
    </Pressable>
  </View>
);

这样操作时：

• 点击未激活的按钮：它会变成高亮状态，其他按钮自动取消高亮
• 点击已激活的按钮：它会取消高亮，回到初始状态

方案二：独立切换（每个按钮互不影响） #

如果你需要每个按钮都能独立切换高亮状态（比如可以同时高亮多个按钮），可以用对象来存储每个按钮的激活状态：

步骤1：修改状态为对象 #

初始状态里给每个按钮设置默认的未激活状态：

const [buttonStates, setButtonStates] = useState({
  btn1: false,
  btn2: false,
  btn3: false
});

步骤2：更新点击处理函数 #

点击按钮时，只切换当前按钮的状态，不影响其他按钮：

const handleButtonClick = (buttonId) => {
  setButtonStates(prevStates => ({
    ...prevStates,
    [buttonId]: !prevStates[buttonId]
  }));
};

步骤3：渲染按钮 #

根据对象里对应按钮的状态来设置样式：

<Pressable
  style={{
    backgroundColor: buttonStates.btn1 ? 'orange' : 'white',
    padding: 8,
    marginVertical: 4,
    borderRadius: 4
  }}
  onPress={() => handleButtonClick('btn1')}
>
  <Text style={{color: buttonStates.btn1 ? 'white' : 'black'}}>Button 1</Text>
</Pressable>

这种方案下，每个按钮的高亮状态完全独立，操作一个不会影响其他按钮。

备注：内容来源于stack exchange，提问作者Justin Eastin