Implementierung mehrerer Schaltflächen in React: Deaktivierung aller Schaltflächen außer der angeklickten

Question

Ich versuche, drei Schaltflächen zu implementieren. Sobald eine davon angeklickt wird, ändert sich die Hintergrundfarbe, während die Auswahl der anderen beiden Schaltflächen aufgehoben wird und ihre Hintergrundfarbe zur ursprünglichen Farbe zurückkehrt.

Aber wenn ich versuche, es in React zu implementieren, ist es immer 1 Button dahinter (in dem Sinne, dass ich, wenn ich der Reihe nach auf die Buttons 1, 3, 2 klicke, den ausgewählten Button auf 1, 3 setze (kein Tippfehler, nur hinten)).

Hier ist mein Code für diese bestimmte Komponente.

import React, { useEffect } from "react";
import '../output.css'
import Full from '../Logos/Full.png';
import logo from "../logo.svg";
import Images from "./Images";
import { ImageLogo as Img } from "./Images";

export default function Events() {

    const button_colour = "bg-red-700";

    let [colour, setColour] = React.useState("");
    let [colour1, setColour1] = React.useState("");
    let [colour2, setColour2] = React.useState("");

    const [backgroundColor, setBackgroundColor] = React.useState('transparent');
    const [backgroundColor1, setBackgroundColor1] = React.useState('transparent');
    const [backgroundColor2, setBackgroundColor2] = React.useState('transparent');

    function handleClick(i: number) {
        console.log(`${i} and ${backgroundColor} and ${backgroundColor1} and ${backgroundColor2}`)
        switch (i) {
            case 0:
                setBackgroundColor(button_colour);
                setBackgroundColor1('transparent');
                setBackgroundColor2('transparent');
            case 1:
                setBackgroundColor('transparent');
                setBackgroundColor1(button_colour);
                setBackgroundColor2('transparent');
            case 2:
                setBackgroundColor('transparent');
                setBackgroundColor1('transparent');
                setBackgroundColor2(button_colour);
        }
    }

    // Create 3 refs
    const ref1 = React.useRef(null);
    const ref2 = React.useRef(null);
    const ref3 = React.useRef(null);

    const refs = [ref1, ref2, ref3];

    useEffect(() => {
        // console.log(colour);
    }, [colour, colour1, colour2]);

    const changeColour = (index: number) => {
        let newColour = [colour, colour1, colour2];
        for (let i = 0; i < 3; i++) {
            if (i !== index) {
                newColour[i] = "";
            } else {
                newColour[i] = button_colour;
            }
        }

        // Remove button_colour from all refs
        for (let i = 0; i < 3; i++) {
            if (refs[i].current) {
                refs[i].current.className = refs[i].current.className.replace(button_colour, "");
            }
        }

        setColour(newColour[0]);
        setColour1(newColour[1]);
        setColour2(newColour[2]);
        console.log(newColour);
        if (ref1.current) {
            ref1.current.className += " " + colour;
        }
        if (ref2.current)
            ref2.current.className += " " + colour1;
        if (ref3.current)
            ref3.current.className += " " + colour2;
        console.log(`Colours are ${colour}, ${colour1}, ${colour2}`);
    }

    const k = (i: number) => {
        // console.log(`Hi, it's ami ${colour}, ${colour1}, ${colour2}`);
        return 1;
    }

    return (
        <div className="">
            <h1 className="text-white font-bold text-center">EVENT SCHEDULE</h1>
            <div className="Dates flex text-yellow-800 font-bold justify-center h-15-s">
                {/* <p className="w-1.5/12 text-center h-4/6 hover:button_colour rounded-md" onClick={e => changeColour(0)} ref={ref1}>January 10th</p> */}
                {/* <button onClick={e => handleClick(0)} style={{ backgroundColor }}>January 10th</button>
                <button onClick={e => handleClick(1)} style={{ backgroundColor: backgroundColor1 }}>January 11th</button>
                <button onClick={e => handleClick(2)} style={{ backgroundColor: backgroundColor2 }}>January 12th</button> */}
                <p className="w-1.5/12 text-center h-4/6 hover:button_colour rounded-md" onClick={e => changeColour(0)} ref={ref1}>January 11th</p>
                <p className="w-1.5/12 text-center h-4/6 hover:button_colour rounded-md" onClick={e => changeColour(1)} ref={ref2}>January 11th</p>
                <p className="w-1.5/12 text-center h-4/6 hover:button_colour rounded-md" onClick={e => changeColour(2)} ref={ref3}>January 12th</p>
            </div>
            {/* {colour[0] !== "" && k(0) && <Images />}
            {colour[1] !== "" && k(1) && <Img />}
            {colour[2] !== "" && k(2) && <Img />} */}
        </div>
        
    );
}

Ich habe das Bauteil von './Images' 导入的组件只是具有 <img src={<Image_here>} /> bekommen.

Answer 1

维护 activeBtnElement 的状态，当您单击特定按钮时，用该状态更新此 activeBtnElement 状态。然后根据该状态应用条件。您还可以使用buttonGroup。