onClick ={ () => 和 onClick 有什么区别?function()} 和 onClick = {function()}? [英] What's the difference between onClick ={ () => function()} and onClick = {function()}?

问题描述

这段代码有什么区别:

<button onClick={()=>props.submitHandler(searchInputValue)}>Submit</button>

和

<button onClick={props.submitHandler(searchInputValue)}>Submit</button>

区别在于第一个有括号，第二个没有.没有括号，我的应用程序似乎无限期地重新渲染.谁能给我解释一下?

The difference is the first one has the parentheses and the second one doesn't. Without the parentheses, my app seems to be re-render indefinitely. Can someone kindly explain it to me?

推荐答案

在第一个:

<button onClick={()=>props.submitHandler(searchInputValue)}>Submit</button>

这是箭头函数，它只会在点击按钮时触发.

This is arrow function and it will trigger only onClick of the button.

第二个:

<button onClick={props.submitHandler(searchInputValue)}>Submit</button>

这是一个正常的函数调用，它会在组件渲染发生时立即调用该方法.

This is a normal function call , which calls the method as soon the rendering of the component happens.

这篇关于onClick ={ () => 和 onClick 有什么区别?function()} 和 onClick = {function()}?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！