简体   繁体   中英

How to change background color of button onClick in react js?

There is more than one button using the map function and display it. Want to change the Background color of a button that I click. And others want it as it is. And again when I click on another button then only change the BG color of that button only. There are two files. One component id define button component using map function and another one is button component. Main Component

 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 Component -

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;

You are passing the selectedId prop to the CategoryBtn component, you can make use of it or you can pass in a boolean already

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)
    }
    />
  }
});

In the categoryBtn component return the button with a dynamic class

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

And in your CSS module, you can have the class for the background-colour

.selectedCss
{ background-color: lightblue;}

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM