En la publicación original, ya hay una publicación sobre function() vs function.

Sin embargo, en resumen (y en términos simples), hay 2 formas de manejar onClick.

Cuando quieras pasar algún valor a la función

 //the button <button onClick={() => myFunction('I am a click')}>Button</button> //the function const myFunction = (value) => { console.log(value) //prints 'I am a click' }

Cuando NO necesita pasar ningún valor (los eventos/accesorios predeterminados se pasarán de forma predeterminada)

 //the button <button onClick={myEvent}>Button</button> //the function const myFunction = (event) => { console.log(event) //prints the button element }

Creación de un componente de botón personalizado con accesorios personalizados.

 const MyButton = ({ onClick }) => { const customOnClick = () => { onClick('Somebody', 'Special'); //we call the onclick here } return <button onClick={customOnClick}>Click Me</button> } const App =() => { //the onClick in MyButton component actually triggers this function. const onClick = (value, value2) => { console.log(value,value2) //prints "Somebody Special" } return (<MyButton onClick={onClick} />) // i do not need to specify the props to pass }

<Button onClick={function}>

Asigna la referencia de una función declarada al detector de clics. Esto es preferible.

 <Button onClick={function()}>

Asigna el resultado de llamar a la función al detector de clics. Probablemente no quiera hacer esto a menos que la función devuelva una función propia, también conocida como cierre .

 <Button onClick={() => function()}>

Esto es básicamente lo mismo que el primer ejemplo, pero en React esta expresión de función se define cada vez que se procesa el componente, por lo que es posible que tenga algunos problemas de rendimiento si su aplicación escala. Es preferible el primer ejemplo.

 <Button onClick={() => function}>

No hace nada útil. Evitar.