Cambiar el estilo de un botón al hacer clic

Solución:

Puede intentar usar el estado para almacenar el color. Tal vez esto le dé la idea de cómo resolver el problema:

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'));

Aquí hay un violín.

También tienes acceso al evento y al objetivo actual del evento.

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

Aqui hay otra solucion

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

De esta manera, puede cambiar solo la propiedad de estilo necesaria para evitar duplicados en CSS.

---

---

Utiliza Nuestro Buscador