实现点击Button，改变背景颜色（多个按钮互斥显示）

一功能描述

在界面中，有一组button，现在需要实现下面功能：点击其中一个，改变被点击button的背景颜色。当点击下一个之后，之前点击过的按钮背景颜色还原，当前被点击的button背景色又被改变。效果如下图：

当点击了test1，test1的背景色变为了红色。再继续点击test2，test2的背景色变为了红色，而test1的背景色还原。

二功能实现（以React代码为例，其他框架逻辑类似）

1. 方式一：使用 className和动态的onClick事件。

import {Button, Space} from "antd";
import React, {useEffect} from "react";const ButtonClick = () => {const changeColorMethod = () => {let but = document.getElementsByClassName("buttonColor");for (let i = 0; i < but.length; i++) {but[i].onclick = function () {for (var i = 0; i < but.length; i++) {but[i].style.backgroundColor = '';}this.style.backgroundColor = 'red';}}}useEffect(() => {changeColorMethod()}, []);return <div><Space><Button className={`buttonColor`}>test1</Button><Button className={`buttonColor`}>test2</Button><Button className={`buttonColor`}>test3</Button></Space></div>
};export default ButtonClick;

2. 方式二：使用 className和手动添加的onClick事件。

import {Button, Space} from "antd";
import React from "react";const ButtonClick = () => {const changeColorMethod = (e) => {let button = document.getElementsByClassName("buttonColor");for (let i = 0; i < button.length; i++) {button[i].style.backgroundColor = '';}e.currentTarget.style.backgroundColor = "red";}return <div><Space><Button className={`buttonColor`} onClick={changeColorMethod}>test1</Button><Button className={`buttonColor`} onClick={changeColorMethod}>test2</Button><Button className={`buttonColor`} onClick={changeColorMethod}>test3</Button></Space></div>
};export default ButtonClick;

3. 方式三：使用useState、button的id和onClick事件。

import {Button, Space} from "antd";
import React, {useState} from "react";const ButtonClick = () => {const [lastNode, setLastNode] = useState("");// 使用idconst changeColorMethod = (e) => {// 还原上一个if (lastNode) {const oldNodeInfo = document.getElementById(lastNode);if (oldNodeInfo) {oldNodeInfo.style.backgroundColor = '';}}const currentId = e.currentTarget.id;const newNodeInfo = document.getElementById(currentId);if (newNodeInfo) {newNodeInfo.style.backgroundColor = 'red';}setLastNode(currentId)}return <div><Space><Button id={"test1"} onClick={changeColorMethod}>test1</Button><Button id={"test2"} onClick={changeColorMethod}>test2</Button><Button id={"test3"} onClick={changeColorMethod}>test3</Button></Space></div>
};export default ButtonClick;