如何在Reaction js中更改onClick按钮的背景色？

织梦狗教程前端问题

2022-01-01

How to change background color of button onClick in react js?(如何在Reaction js中更改onClick按钮的背景色？)

本文介绍了如何在Reaction js中更改onClick按钮的背景色？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

有多个按钮在使用和显示地图功能。我想更改我单击的按钮的背景颜色。而其他人则想要它本来的样子。同样，当我单击另一个按钮时，只更改该按钮的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;

推荐答案

您正在将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  *

react