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

Answer 1

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

Answer 2

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.

Answer 3

Add this to your Tooltip

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

Answer 4

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.

Answer 5

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
}