0

Estoy aprendiendo react con documentación oficial, allí en el tutorial de la pagina oficial desarrollan un pequeño ejemplo de el juego tic tac toe y lo entiendo pero hay una linea que me causa muchísima confusión. En el componente de square (que representa un cuadro del tablero de juego ) se recibe por parámetro un valor para rellenarlo mediante el props, que se envía desde el padre board.

Mi confusión es en square es un botón que hace uso del evento onClick este es el código:

function Square(props) {
return (
  <button
    className="square"
     onClick={ props.onClick} >
    {props.value}
  </button>
);`}`

Que significa esto onClick={props.onClick}? que función llama? o cual es la función del props.onClick?

1
  • mejora la redacción del título de tu pregunta, así como lo colocas no hace sentido en lo absoluto; te invito a leer Cómo preguntar y de paso haz el recorrido de bienvenida
    – user75901
    Commented el 19 jul. 2018 a las 11:48

2 respuestas 2

0

el onClick es un evento sintético de react. Cuando le pasas el manejador del evento (la función de que se ejecuta al hacer click)

<button
 className="square"
 onClick={ props.onClick} 
>
 {props.value}
</button>

Le estas pasando la referencia de la función onClick que le pasa desde el componente padre, funciona exactamente igual como un callback.

Esto es gracias a que en javascript literalmente puedes guardar una función en una variable o constante.

Para ejecutarla en otro ámbito o scope diferente el que fue declarada.

En este caso estas almacenado en el objeto de las propiedades del compon ente Square la función llamada onClick que se declara en su componente padre para cuando se active el evento onClick del Square se ejecute en ese preciso instante.

Ejemplo:

Class ComponentePadre extends Component {
  constructor(...props){
    super(...props);
    this.onClick = this.onCLick.bind(this);
  }

  //manajador onClick que se pasas como props
  onCLick(e){ 
    console.log(e)
  }
  render(){
    return(
    //almacenado la funcion en el componente hijo para ser ejecutada  dentro de el.
     <ComponenteHijo onClick={this.onClick}/>
    );
  }
}
0

props es una variable que guarda los parámetros recibidos en a través de la etiqueta:

<Square onClick={funcionQueTrataElClick} value="valor">

Cuando generas ese <square> en el HTMLfinal , se sustituye por el código que devuelves, algo similar a:

<button className="square" onclick="funcionQueTrataElClick" value="valor">

2
  • que quiere decir con que se sustituye por el codigo que devuelve ? porque eso es lo que me confunde en square no hay funcion para el click solo existe el render() , el evento para click esta en el padre Board que maneja los state del padre :S
    – Jorge E.
    Commented el 19 jul. 2018 a las 12:04
  • Si te fijas al momento de crear el Square (en el método renderSquare) se le manda el onClick={() => this.handleClick(i)}, como dice Pablo esto es almacenado en las "props" de Square que recibí en su etiqueta onClick, luego puedes usar estas "props" en tu class para diferentes cosas, en este caso crea un botón sentándole el función onClick que recibió Commented el 19 jul. 2018 a las 12:40

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.