我試圖實現 3 個按鈕,一旦單擊其中一個按鈕,它就會更改背景顏色,而其他 2 個按鈕將被取消選擇,並且它們的背景顏色將恢復為原始顏色。
但是,當我嘗試在React 中實現它時,它總是落後1 個按鈕(從某種意義上說,如果我按順序單擊按鈕1、3、2,我會將選定的按鈕設定為1、3(不是一個錯字,就在後面))。
這是我針對該特定元件的程式碼。
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> ); }
我從 './Images'
導入的元件只是具有 <img src={<Image_here>} />
的元件。
維護 activeBtnElement 的狀態,當您按一下特定按鈕時,請用該狀態更新此 activeBtnElement 狀態。然後根據該狀態套用條件。您也可以使用buttonGroup。