关于命名： onXXX 和 handleXXX 怎么区分

[fancy2020]

前端代码(react)中经常需要处理事件， 而事件处理函数的命名方式通常有(拿 click 事件举例):onClick 和 handleClick 这两种 。
我发现自己这两种命名方式经常是混着的，强迫症不太能忍，想知道大家一般是怎么命名事件处理函数的。

[hantsy]

<form onSubmit={handleLogin}/>

<button onClick={increaseCounter} />

[hantsy]

onXXX 不是 react 内置的属性，看 React Form 那一篇。不大明白 React 。

[xianchenxy]

用动词，比如 do 、send...等等

[guyeu]

on 后面是动词，handle 后面是名词？

[sleepwalker]

个人一般用 handle 或其他动作来表明当前函数的作用，on 在传递 props 的时候用

[xiadd]

@sleepwalker 同

[Mutoo]

onClick: add a click event listener
handleClick(Event): a handle function that deal with a click-event parameter

[czkm1320]

插个眼，我也一直想知道

[crz]

onEvent 是组件定义，组件留了这个事件回调； handleEvent 是传递给这个组件的函数，用来处理这个事件

[iugo]

官方文档给的建议挺清楚了:

```
<button onClick={handleClick}>
</button>
```

https://reactjs.org/docs/handling-events.html

[lizz666]

我习惯用 handle

[otakustay]

onXxx 是被动的，你不知道具体会发生什么，其实现由外部指定
handleXxx 是主动的，由你实现并明确知道会发生什么，通常通过 onXxx 交给外部
我不是太喜欢 handleXxx，我更喜欢有明确语义说明会发生什么的函数名，然后传给 onXxx

[codermagefox]

一点个人的理解:
on 表动作.比如,我拉屎以后冲厕所,冲这个动作,应该是 on 冲厕所.
handle 表处理事件.比如我拉屎以后,需要用一个事件来处理屎,这个事件就是 handleXXX.
不清晰?

如果你要(冲)厕所,就用 on 冲
如果你要处理屎,就用 handleChange(屎)

所以核心是,你当时是想做出行为还是想处理过程.

[JerryCha]

onSomething -passing to-> handleSomething