React元件中的事件

2022-09-09 12:21:13 字數 1201 閱讀 7523

方法名稱:

react中採用了駝峰命名法,從第二個單詞的字母開始大寫

原生js的寫法是全部小寫

vue中是通過v-on:加上觸發事件(也是全小寫的,但是沒有on)

傳值:react中事件接受的值是乙個方法,需要用{}包裹起來

原生js的事件接受的值是乙個字串

vue中的事件接受的值是乙個字串(方法名稱)

class

eventtest

extends

react.component

}render()

>點選<

/button>

<

/div>)}

click

=(e)

=>

}

像這裡的e引數,在觸發這個事件時並沒有傳遞乙個引數給這個函式,但是它仍會有乙個預設引數

這個預設引數就是觸發這個事件的元素

傳遞其他引數的方式

class

eventtest

extends

react.component

}render()

>點選<

/button>

<

/div>)}

click

=(e,arg)

=>

}

這裡還可以使用匿名函式來實現,不過匿名函式

因為在react中事件接收的值必須是乙個函式,而這個函式會有乙個預設的引數,如果想傳遞其他引數,就必須先用乙個匿名函式或箭頭函式來接收這個引數(當然也可以不接收),然後再呼叫元件中的方法

class

eventtest

extends

react.component

}render()

>點選<

/a>

<

/div>)}

click

=(e)

=>

}

在react中需要在事件呼叫的方法中加上e.preventdefault()

在原生js中,直接在事件呼叫的方法加上return false就可以了

在vue中在標籤繫結的事件名稱後面加上.prevent就可以了

React元件中的事件處理函式

class reactevent extends component handleclick render click mebutton render中使用箭頭函式class reactevent extends component render click mebutton 使用class fie...

react 父元件中的事件呼叫子元件方法

class 元件中,父元件中的方法呼叫子元件中的方法 child.js exprot default class child extends component componentdidmount setname render div import react,from react import r...

React中的表單元件

表單是前端非常重要的一塊內容,並且往往包含了錯誤校驗等邏輯。react對表單元素做了專門的優化處理,他對表單元素做了一些抽象,使得他們的使用方式更統一更規範。表單裡面出來了乙個新的概念叫 約束性元件 那麼如何理解約束性元件和非約束性元件呢。約束性元件,簡單的說,就是由react管理了它的value,...