¿Cómo sabe reaccionar para proporcionar el evento como un segundo argumento en el siguiente código?
const clickMe = (parameter) => (event) => { event.preventDefault(); // Do something } <button onClick={clickMe(someParameter)} />¿Genera esto para:
<button onClick={(event) => clickMe(someParameter)(event)} />¿O cómo funciona? Gracias.
Tal vez esto ayude a explicarlo un poco mejor.
Los cierres son funciones que llevan consigo la información (variables, etc.) de su entorno local cuando se devuelven.
Trabajaré este ejemplo sin funciones de flecha, ya que pueden ser un poco engañosas.
// `multplyBy` accepts a number as its argument // It returns a new function that "remembers" that number // when it's returned. But that new function *also* // accepts a number function multiplyBy(n) { return function(n2) { return n2 * n; } } // So `multiplyBy(5)` returns a new function // which we assign to the variable `five` const five = multiplyBy(5); // And when we call `five` with a number we get // the result of calling 5 * 10. console.log(five(10)); Si sustituye multiplyBy(n) con clickMe(n) , verá que obtendrá una nueva función que utiliza el oyente de clics, y el primer argumento de esa función siempre será el evento.
La variable Clickme en su código es una función cuyo retorno es la función e => {...}. Entonces, cuando especificas así:
<button onClick={clickMe(someParameter)} />es equivalente a
<button onClick={e => {...} />que es la forma básica de un controlador de eventos en reaccionar