Changing style of a button on click

Question

Is it possible to change background-color of my button onClick function?

ex. click background-color: black, another click background-color: white

I've tried something like this.style, no result.

I've managed to get overlay working and insert needed data inside of it. But didn't managed to find any post that could help me. I am using react-bootstrap. This is my code.

  const metaDataOverlay = (
  <div>
  <style type="text/css">{`
  .btn-overlay {
    background-color: white;
    margin-right: -15px;
    margin-left: -15px;
    padding-bottom: -20px;
    padding: 0;
  }
  `}</style>

      <ButtonToolbar>
        <ButtonGroup>
        <OverlayTrigger trigger={['hover', 'focus']} placement="left" overlay={popoverHoverFocus}>
          <Button bsStyle="overlay" onClick={ clicked } onKeyPress={ keypress }>
            <div className={bemBlocks.item().mix(bemBlocks.container("item"))} data-qa="hit">
              <a href={url} onClick={(e)=>{e.preventDefault(); console.log("123")}}>
                <div>
                  <img data-qa="poster" className={bemBlocks.item("poster")} src={result._source.poster} width="240" height="240"/>
                </div>
              </a>
            </div>
          </Button>
        </OverlayTrigger>
        </ButtonGroup>
      </ButtonToolbar>

    </div>
  )

Boky · Accepted Answer · 2018-05-25T12:20:47.450

55

You can try to use state to store the color. Maybe this would give you the idea how to solve the problem :

class Test extends React.Component {
    constructor(){
        super();

        this.state = {
           black: true
        }
    }

    changeColor(){
       this.setState({black: !this.state.black})
    }

    render(){
        let btn_class = this.state.black ? "blackButton" : "whiteButton";

        return (
             <button className={btn_class} onClick={this.changeColor.bind(this)}>
                  Button
             </button>
        )
    }
}

React.render(<Test />, document.getElementById('container'));

Here is a fiddle.

edited May 25 '18 at 12:20

answered Feb 01 '17 at 11:41

Boky

11,554
28
93
163

1

yes it did help i also found this [link](https://react-bootstrap.github.io/components.html#custom-overlays) helpful since it has examples – user3350597 Feb 02 '17 at 11:31
but with this. How can you get the button to do anything else other than change the color on click? Say you wanted to fire a function... – mrpbennett Jul 15 '21 at 15:36

Dmitriy Kovalenko · Answer 2 · 2018-11-11T13:07:16.703

35

You also have access to event and current target of the event

handleClick = (event) => {
   // accessible
   event.target.style
   event.target.classList //to change style via css
}

edited Nov 11 '18 at 13:07

answered Feb 01 '17 at 11:32

Dmitriy Kovalenko

3,437
3
19
39

could you complete this with black and white – kirill_igum Nov 05 '20 at 23:18
3

`event.target.style.backgroundColor = "red"` `e.target.classList.add("mystyle");` – Nevada Mar 15 '21 at 23:57

score 3 · Answer 3 · edited Dec 03 '19 at 13:40

3

Here is another solution

changeStyles = () => {
    let element = document.getElementById('button')
    ReactDOM.findDOMNode(element).style.backgroundColor = this.state.isClicked?'black' : 'white'
}

In this way you can change only needed style property preventing duplicates in CSS.

edited Dec 03 '19 at 13:40

Panciz

2,183
2
30
54

answered Dec 03 '19 at 13:07

Armen Khachatryan

102
9

score 2 · Answer 4 · answered Nov 06 '19 at 13:41

This is how you can access

    handleClick=(e)=>{
        console.log("this is working fine");
        e.preventDefault();
        e.target.style.color = 'black'
        console.log(e.target);
    }

If you want more dynamically you can initialize state with some default value of style afterwords use setState function to update your state

score 0 · Answer 5 · answered Jun 21 '20 at 23:59

0

Add this to your Tooltip

<Tooltip cursor={{ fill: 'transparent' }} />

answered Jun 21 '20 at 23:59

Ahad Khwaja

171
2
5

score 0 · Answer 6 · edited Mar 18 '21 at 15:18

Here is another solution :

import React, { Component } from 'react';
import './App.css';

class App extends Component {
  constructor(props) {
      super(props);
      this.state = {
      BackgroundColor: "BLACK"};
  };

render(){
    return (
      <div className='app'>
        <button className={this.state.BackgroundColor === "BLACK" ? "Black" : "nothing"}
        onClick={() => {this.setState({BackgroundColor: "WHITE"})}}>CHANGE TO BLACK</button>
        <button className={this.state.BackgroundColor === "WHITE" ? "White" : "nothing"}
        onClick={() => {this.setState({BackgroundColor: "BLACK"})}}>CHANGE TO WHITE</button>
      </div>
    );
  }
}

export default App;

This code will help you to hide the ex black button and change with new button with white background. This function will also work for the new white button. If maybe you just want to change background-color of button without repeat situation you can also try to change conditional state in render

render(){
    return (
      <div className='app'>
        <button className={this.state.BackgroundColor === "BLACK" ? "Black" : "White"}
        onClick={() => {this.setState({BackgroundColor: "WHITE"})}}>CHANGE TO BLACK</button>
      </div>
    );
  }
}

Here is the CSS :

*{
  margin: 0;
  padding: 0;
 }

.app{
  display: flex;
  justify-content: center;
  align-items: center;
}
.Black{
  background-color: black;
  color: white;
}

.White{
  background-color: white;
  color: black;
}

.nothing{
  display: none;
}

Changing style of a button on click

6 Answers6

Linked

Related