如何在反应js中更改按钮onClick的背景颜色？

Posted 2023-02-21

【中文标题】如何在反应js中更改按钮onClick的背景颜色？

【英文标题】：How to change background color of button onClick in react js?

【发布时间】：2021-04-14 18:34:21

【问题描述】：

使用地图功能并显示的按钮不止一个。 想要更改我单击的按钮的背景颜色。而其他人则希望它保持原样。 当我再次单击另一个按钮时，仅更改该按钮的 BG 颜色。 有两个文件。一个组件 id 使用 map 函数定义按钮组件，另一个是按钮组件。 主要组件

 state = 
        categories: [],
        selectedCategory: null,
        value: 'test',
        clicked1: false,
    
categorySelectedHandler = (id ,e) => 
        this.setState( selectedCategory: id );
    

const categoriesName = this.state.categories.map((category ,index) => 
            // console.log("The current iteration is: " + index);
                let visible_in_pricing_page = category.visible_in_pricing_page
                    
                    if (visible_in_pricing_page) 
                        return <CategoryBtn
                            index = index
                            name=category.title
                            key=category.id
                            selectedId = this.state.selectedCategory
                            clicked=() => this.categorySelectedHandler(category.id)
                />
            
        );

CategoryBtn 组件 -

import React,  Component   from 'react';
import classes from './price-category-btn.css';

const CategoryBtn = props  => 
    
        return (
            <div style=display:"inline" >
                <a>
                    <button 
                    className=  classes.category_btn  
                    onClick=props.clicked>props.name</button></a>
            </div>
        )
    

export default CategoryBtn;

【参考方案1】：

您正在将 selectedId 属性传递给 CategoryBtn 组件，您可以使用它，也可以传入一个布尔值

const categoriesName = this.state.categories.map((category, index) => 
  // console.log("The current iteration is: " + index);
  let visible_in_pricing_page = category.visible_in_pricing_page

  if (visible_in_pricing_page) 
    return <CategoryBtn
    index = 
      index
    
    name = 
      category.title
    
    key = 
      category.id
    
    /** indicate this is the selected button  */
    selected = this.state.selectedCategory === category.id 
    clicked = 
      () => this.categorySelectedHandler(category.id)
    
    />
  
);

在 categoryBtn 组件中返回带有动态类的按钮

<button 
    /** use props.selected to dynamically set the class */
    className=`$classes.category_btn $props.selected` ? classes.selectedCss : ''
    onClick=props.clicked
 >
   props.name
 </button>

在你的 CSS 模块中，你可以有背景颜色的类

.selectedCss
 background-color: lightblue;

【讨论】：

我尝试了您在上面回答的相同代码，但结果是默认情况下 btn 的 BG 颜色显示为绿色。我想要默认类 classes.category_btn 并单击更改为 classes.selectedCss @Ashu

然后根据您的需要修改三元：className=props.selected ? classes.selectedCss : classes.category_btn