Melaksanakan berbilang butang dalam React: menyahpilih semua butang kecuali yang diklik

Question

Saya cuba melaksanakan 3 butang, apabila salah satu daripadanya diklik, ia akan menukar warna latar belakang, manakala 2 butang yang lain akan dinyahpilih dan warna latar belakangnya akan kembali kepada warna asal.

Tetapi apabila saya cuba melaksanakannya dalam React, ia sentiasa ketinggalan 1 butang (dalam erti kata jika saya mengklik butang 1, 3, 2 mengikut urutan, saya menetapkan butang yang dipilih kepada 1, 3 (bukan kesilapan menaip, hanya di belakang)).

Berikut ialah kod saya untuk komponen khusus itu.

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>
        
    );
}

Saya mendapat komponen daripada './Images' 导入的组件只是具有 <img src={<Image_here>} />.

Answer 1

Kekalkan keadaan activeBtnElement dan kemas kini keadaan activeBtnElement ini dengan keadaan tersebut apabila anda mengklik butang tertentu. Kemudian gunakan syarat berdasarkan keadaan itu. Anda juga boleh menggunakan buttonGroup.