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

news2024/10/6 12:32:55

一功能描述

在界面中，有一组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("");

  // 使用id
  const 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;