Button style change when pressed

Question

Can I change background-colormy button onClickfunction?

ex. click background-color: black, one more clickbackground-color: white

I tried something like this.style, no result.

I managed to process the overlay and insert the necessary data into it. But I could not find any position that could help me. I use a bootstrap reaction. 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>
  )

Answer 1

You can try to use state to preserve color. Perhaps this will give you an idea of ​​how to solve the problem:

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

         this.state = {
              color_black: true
         }
    }

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

    render(){
        let bgColor = this.state.color_black ? "black" : "white"

        return (
             <div>
                 <button style={{backgroundColor: bgColor}} onClick={this.changeColor.bind(this)}>Button</button>
             </div>
        )
    }
}

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

Here is the fiddle.

Answer 2

You can access the event and the current purpose of the event.

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