Javascript 如何更改多个按钮的样式并在react中添加幻灯片动画？

我有3个按钮。单击其中一个按钮时，我想添加红色背景。默认情况下，第一个按钮处于活动状态。当我单击第二个或第三个按钮时，第一个按钮的背景样式将从红色变为灰色。我还想在动画中添加幻灯片。例如，如果我当前在第一个按钮上并单击第二个按钮，则背景应该从左到右设置动画。

我当前的代码：

import React from "react";

const TopOptions = () => {
  return (
    <>
      <div className="flex flex-col border-b shadow-lg">
        <div className="flex flex-col px-4">
          <p className="text-xs pl-6 pt-4">PUNE</p>
          <div className="flex flex-row items-center">
            <select className="pl-2">
              <option value="Kothrud Outlet">Kothrud Outlet</option>
            </select>
          </div>
        </div>
        <div className=" bg-gray-100 my-5 text-center flex flex-row items-center justify-evenly text-sm rounded-md mx-4">
          <button className="w-full py-3 font-bold ">DELIVERY</button>
          <button className="w-full py-3 font-bold text-gray-600">
            TAKEAWAY
          </button>
          <button className="w-full py-3 font-bold text-gray-600">
            DINE IN
          </button>
        </div>
      </div>
    </>
  );
};

export default TopOptions;

从“React”导入React；
常数拓扑选项=（）=>{
返回(
浦那

科特鲁德出口
传送
外卖
进餐
);
};
导出默认拓扑选项；

我会给每个按钮一个数字，用第一个按钮的数字初始化一个状态变量，并在每个btn按钮上更改此状态：

    import React, {useState} from "react";

export const TopOptions = () => {
    const [clickedButton, setClickedButton] = useState(0);
    const [yPos, setYPos] = useState(0);
    const buttons = ["DELIVERY", "TAKEAWAY", "DINE IN"];


    const speed = 10;
    let direction = 0;
    const updateState = () => {
        setYPos(yPos + (speed * direction));
    }

    const clickHandler = (index) => {
        direction = index > clickedButton ? 1 : -1;
        let duration = Math.abs(clickedButton - index) * 1000; // 1sec
        setClickedButton(index);
        const animRef = requestAnimationFrame(updateState);
        setTimeout(() => {
            cancelAnimationFrame(animRef);
        }, duration);
    }

    return (
        <>
            <div className="flex flex-col border-b shadow-lg">
                <div className="flex flex-col px-4">
                    <p className="text-xs pl-6 pt-4">PUNE</p>
                    <div className="flex flex-row items-center">
                        <select className="pl-2">
                            <option value="Kothrud Outlet">Kothrud Outlet</option>
                        </select>
                    </div>
                </div>
                <div
                    className=" bg-gray-100 my-5 text-center flex flex-row items-center justify-evenly text-sm rounded-md mx-4">
                    {buttons.map((btn, index) => (
                        <button className={"w-full py-3 font-bold " + (clickedButton === index ? "" : "text-gray-600")}
                                onClick={() => {
                                    clickHandler(index);
                                }} key={"btn" + index}
                        >{btn}</button>
                    ))}
                </div>
                <image src={"yourbackgroundimage.jpg"}
                       style={"position:fixed; width: 100vw; height: 100vh; top: 0; left: " + yPos}/>
                {
                    /*
                    This is not a god example, just to show how to use yPos now.
                    assuming left btn is curently active:
                    if clicked on middle button it lets the image slide from left to right for one second
                    if clicked on right button it lets the image slide from left to right for two second
                     */
                }
            </div>
        </>
    );
};

import React，{useState}来自“React”；
导出常量拓扑选项=（）=>{
常量[clickedButton，setClickedButton]=useState（0）；
const[yPos，setYPos]=useState（0）；
const按钮=[“送货”、“外卖”、“进餐”]；
恒速=10；
设方向=0；
const updateState=（）=>{
setYPos（yPos+（速度*方向））；
}
常量clickHandler=（索引）=>{
方向=索引>点击按钮？1:-1；
让duration=Math.abs（clickedButton-index）*1000；//1秒
设置点击按钮（索引）；
const animRef=requestAnimationFrame（updateState）；
设置超时（（）=>{
取消动画帧（animRef）；
}，持续时间）；
}
返回(
浦那

科特鲁德出口
{按钮.map（（btn，索引）=>(
{
clickHandler（索引）；
}}键={“btn”+索引}
>{btn}
))}
{
/*
这不是一个上帝的例子，只是为了展示如何使用YPO现在。
假设左侧btn当前处于活动状态：
如果单击中间按钮，图像将从左向右滑动一秒钟
如果单击“右”按钮，图像将从左向右滑动两秒钟
*/
}
);
};

您可以为每个按钮的类使用状态。单击每个按钮后，您必须按照以下要求更改该按钮的状态：

import React, {useState} from "react";

const TopOptions = () => {

    const [btnClass, setBtnClass] = useState({"delivery": "btn-danger", "takeaway": "", "dinein": ""});

    const handleClick = (e) => {
        // after handling the click event add following code
        let updatedBtnClass = {"delivery": "", "takeaway": "", "dinein": ""};
        updatedBtnClass[e.target.name] = "btn-danger"; // for red background class
        setBtnClass(updatedBtnClass);
    }

    return (
        <>
            <div className="flex flex-col border-b shadow-lg">
                <div className="flex flex-col px-4">
                    <p className="text-xs pl-6 pt-4">PUNE</p>
                    <div className="flex flex-row items-center">
                        <select className="pl-2">
                            <option value="Kothrud Outlet">Kothrud Outlet</option>
                        </select>
                    </div>
                </div>
                <div
                    className=" bg-gray-100 my-5 text-center flex flex-row items-center justify-evenly text-sm rounded-md mx-4">
                    <button name={"delivery"} className={"w-full py-3 font-bold " + btnClass.delivery} onClick={handleClick}>
                        DELIVERY
                    </button>
                    <button name={"takeaway"} className={"w-full py-3 font-bold " + btnClass.takeaway}  onClick={handleClick}>
                        TAKEAWAY
                    </button>
                    <button name={"dinein"} className={"w-full py-3 font-bold " + btnClass.dinein} onClick={handleClick}>
                        DINE IN
                    </button>
                </div>
            </div>
        </>
    );
};

export default TopOptions;

import React，{useState}来自“React”；
常数拓扑选项=（）=>{
const[btnClass，setBtnClass]=useState（{“delivery”：“btn danger”，“takeaway”：“dinein”：“}）；
常量handleClick=（e）=>{
//处理click事件后，添加以下代码
让updatedBtnClass={“delivery”：“takeaway”：“dinein”：“}；
updatedBtnClass[e.target.name]=“btn危险”；//用于红色背景类
SetbtClass（更新的BTNClass）；
}
返回(
浦那

科特鲁德出口
传送
外卖
进餐
);
};
导出默认拓扑选项；

您需要做的第一件事是将硬编码按钮替换为正在渲染的数组，并在应用程序中包含一个

状态变量，该变量存储在当前活动的幻灯片中。您能在这里帮助我了解更多信息吗？我不是很擅长这个。这是非常基本的反应的东西，我不能在这里提供免费的教程，显然已经在官方的反应网站上了。我建议您从这里开始，首先学习所有基本概念：谢谢，但我希望第一个按钮默认为红色。你能想到别的吗？有了这个代码，第一个按钮应该是红色的，没有测试过，但我很确定。完全粘贴：编辑sry我搞砸了，这里是新的粘贴人，你是一个救生员。非常感谢你。有什么方法可以添加我在问题中提到的幻灯片效果吗？在编辑中添加了动画，希望它能按预期工作，您可能需要在单击处理程序中更改方向的-1和1，但没有测试它。它工作得很好。我是否可以添加幻灯片动画？