Cómo usar onClick con divs en React.js

Estoy creando una aplicación muy simple en la que puedes hacer clic en divisiones cuadradas para cambiar su color de blanco a negro. Sin embargo, estoy teniendo problemas. Me gustaría usar la función onClick para permitir que un usuario haga clic en un cuadrado para cambiar su color, pero parece que no funciona. He intentado usar intervalos y etiquetas p vacías, pero tampoco funciona.

Aquí está el código en cuestión:

var Box = React.createClass({
    getInitialState: function() {
        return {
            color: 'white'
        };
    },

    changeColor: function() {
        var newColor = this.state.color == 'white' ? 'black' : 'white';
        this.setState({
            color: newColor
        });
    },

    render: function() {
        return (
            <div>
                <div
                    style = {{background: this.state.color}}
                    onClick = {this.changeColor}
                >
                </div>
            </div>
        );
    }
});

Aquí hay un enlace a mi pequeño proyecto en CodePen.
http://codepen.io/anfperez/pen/RorKge

Para tranquilizar su mente, el onClick event funciona con divs en reaccionar, así que verifique dos veces la sintaxis de su código.

Estos son correctos:

<div onClick={doThis}>
<div onClick={() => doThis()}>

Estos están mal:

<div onClick={doThis()}>
<div onClick={() => doThis}>

(y no olvides cerrar tus etiquetas… Esté atento a esto:

<div onClick={doThis}

falta la etiqueta de cierre en el div)

Esto funciona

var Box = React.createClass({
    getInitialState: function() {
        return {
            color: 'white'
        };
    },

    changeColor: function() {
        var newColor = this.state.color == 'white' ? 'black' : 'white';
        this.setState({ color: newColor });
    },

    render: function() {
        return (
            <div>
                <div
                    className="box"
                    style={{background:this.state.color}}
                    onClick={this.changeColor}
                >
                    In here already
                </div>
            </div>
        );
    }
});

ReactDOM.render(<Box />, document.getElementById('div1'));
ReactDOM.render(<Box />, document.getElementById('div2'));
ReactDOM.render(<Box />, document.getElementById('div3'));

y en tu css borra los estilos que tienes y pon esto

.box {
  width: 200px;
  height: 200px;
  border: 1px solid black;
  float: left;
}

Tienes que diseñar el div real al que estás llamando onClick en. Dale al div un nombre de clase y luego dale estilo. También recuerde eliminar este bloque donde está renderizando App en el dom, la aplicación no está definida

ReactDOM.render(<App />,document.getElementById('root'));

¡El siguiente código funciona ahora!

const test = () => {
const onClick = () => console.log('hi');

return (
<div onClick={onClick} aria-hidden="true">
  Content here
</div>
)};

Tu caja no tiene talla. Si establece el ancho y la altura, funciona bien:

var Box = React.createClass({
    getInitialState: function() {
        return {
            color: 'black'
        };
    },

    changeColor: function() {
        var newColor = this.state.color == 'white' ? 'black' : 'white';
        this.setState({
            color: newColor
        });
    },

    render: function() {
        return (
            <div>
                <div
                    style = {{
                        background: this.state.color,
                        width: 100,
                        height: 100
                    }}
                    onClick = {this.changeColor}
                >
                </div>
            </div>
        );
    }
});

ReactDOM.render(
  <Box />,
  document.getElementById('box')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id='box'></div>

Si bien esto se puede hacer con reaccionar, tenga en cuenta que usar onClicks con divs (en lugar de Buttons o Anchors, y otros que ya tienen comportamientos para eventos de clic) es una mala práctica y debe evitarse siempre que sea posible.

Esto también funciona:

Acabo de cambiar con this.state.color==='white'?'black':'white'.

También puede elegir el color de los valores desplegables y actualizar en lugar de ‘negro’;

(CódigoPen)

Solo necesitaba un botón de prueba simple para react.js. Esto es lo que hice y funcionó.

function Testing(){
 var f=function testing(){
         console.log("Testing Mode activated");
         UserData.authenticated=true;
         UserData.userId='123';
       };
 console.log("Testing Mode");

 return (<div><button onClick={f}>testing</button></div>);
}