Try   HackMD

React Event Handler 命名慣例

TL;DR:

<MyComponent onClick={handleClick} />

TL;DR:

<MyComponent onClick={handleClick} />

Prop Name

on[TargetName]EventName[PayloadType]
  • EventName: 事件名稱,例如 Click -> onClickPress -> onPressChange -> onChangeSubmit -> onSubmit
  • TargetName: Optional,如果一個 component 有多個會觸發事件的元素,這裡就會放元素的名稱,例如變成 onLoveIconPressonRemoveButtonClickonDescriptionChangeonSelectionChange (React Native - TextInput)。
  • PayloadType: 如果傳送給 event handler 的 payload (或說,event handler function 的 argument) 不是一個標準的 Event 或如慣例的 Event Object,這裡就會放 payload 的型別,例如 onChangeText (React Native - TextInput)。

Function Name

如 prop name,但把 on 改成 handle[ElementName],optional 的 ElementName 是用來識別這個 event handler function 是被用來 handle 哪個 element 用的。例如:

  • onClick -> handleLikeButtonClick
    (<LikeButton onClick={handleLikeButtonClick} />)
  • onChangeText -> handleTitleChangeText
    (<TextInput style={styles.titleTextInput} onChangeText={handleTitleChangeText} />)

參考資料