访问道具以有条件地更改按钮颜色的问题

Question

我想要实现的是：我想根据 activity 的类型更改单击按钮时的颜色。例如，如果您单击具有 activity“浓度”的按钮，则当您单击该按钮时，应应用 activity 类型的特定样式 class。我苦苦挣扎的是在我的 changeStyle 函数中访问 activity.type 。如何访问 activity 类型并让按钮根据 activity 类型更改颜色？

Game.js

import React, { useState } from 'react';

const Game = () => {
    const [activityStyle, setActivityStyle] = useState("activity");

    const zones = [
        {id: 1, name: "Concentration", styleType: "concentration-zone"},
        {id: 2, name: "Communication", styleType: "communication-zone"},
        {id: 3, name: "Collaboration", styleType: "collaboration-zone"},
        {id: 4, name: "Chill Out", styleType: "chill-out-zone"},
        {id: 5, name: "Camp", styleType: "camp-zone"}
    ]
    const activities = [
        {id: 1, name: "Code", type: "concentration"},
        {id: 2, name: "Teams Meeting", type: "communication"},
        {id: 3, name: "Make a phone call", type: "camp"},
        {id: 4, name: "Work shop", type: "collaboration"},
        {id: 5, name: "Coffee break", type: "chillout"}
    ]

    const changeActivityStyle = () => {
       
        
         if (activityType === "concentration") {
             setActivityStyle("activity-concentration"); 
           }
         if (activityType === "communication") {
             setActivityStyle("activity-communication");
         }
         if (activityYype === "camp") {
             setActivityStyle("activity-camp");
         }
         if (activityType === "chillout") {
             setActivityStyle("activity-chill-out");
         } 
         return;
     };

    return (
            <section className="game-area">
                {zones.map((zone =>
                    <div className="zone" id={zone.styleType} key={zone.id}>
                        <p>{zone.name}</p>
                    </div>
                    ))}
                    <div className="activity-container">
                        {activities.map((activity => 
                            <button className={activityStyle} 
                                    onClick={changeActivityStyle} 
                                    key={activity.id} 
                                    activityType={activity.type}
                                    >
                                <p>{activity.name}</p>
                            </button>))}
                    </div>        
            </section>
        );

      
};

export default Game;

Answer 1

像这样修改changeActivityStyle方法：

 /* create reactive state variable to hold the index of the activity clicked */
 const [clickedActivityIndex, setClickedActivityIndex] = useState(-1);

 const changeActivityStyle = (activityType, index) => {
       /* set the index provided by the click handler as active index */
       setClickedActivityIndex(index);

       // access activityType and do whatever you want


        
         if (activityType === "concentration") {
             setActivityStyle("activity-concentration"); 
           }
         if (activityType === "communication") {
             setActivityStyle("activity-communication");
         }
         if (activityYype === "camp") {
             setActivityStyle("activity-camp");
         }
         if (activityType === "chillout") {
             setActivityStyle("activity-chill-out");
         } 
         return;
     };

and in JSX 并提供 activity.type 和被点击元素的 index 作为此方法的参数：

 <div className="activity-container">
     {activities.map((activity,index) => 
     <button className={clickedActivityIndex === index ? activityStyle : ''}
     onClick={() => changeActivityStyle(activity.type, index)} 
     key={activity.id} 
     activityType={activity.type}>
     <p>{activity.name}</p>
     </button>)}
 </div>

访问道具以有条件地更改按钮颜色的问题

Problem accessing prop to change color of button conditionally

onclick

reactjs

react-props