快捷導(dǎo)航

React組件創(chuàng)建與事件綁定的實(shí)現(xiàn)方法

更新時(shí)間：2022年12月26日 10:28:04 作者：夢(mèng)幻通靈

react事件綁定時(shí)。this并不會(huì)指向當(dāng)前DOM元素。往往使用bind來(lái)改變this指向，今天通過(guò)本文給大家介紹React事件綁定的方式，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)吧

1、組件創(chuàng)建方式

方式一-函數(shù)創(chuàng)建組件

使用JS函數(shù)或箭頭函數(shù)創(chuàng)建組件

約定1：函數(shù)名必須是大寫字母開(kāi)頭

約定2：函數(shù)組件必須有返回值，表示該組件的結(jié)構(gòu)

如果返回值為null，則不渲染任何內(nèi)容

參考代碼如下圖所示。

// 方式1：JS函數(shù)
function Hello(){
	return (
		<div>函數(shù)組件</div>
	)
}
// 方式2：箭頭函數(shù)
const Hello = () => <div>函數(shù)組件</div>
// 渲染函數(shù)組件
ReactDOM.render(<hello />,document.getElementById('root'))

方式二-使用類創(chuàng)建組件

使用ES6的class創(chuàng)建的組件

約定1：類名必須是大寫字母開(kāi)頭；

約定2: 類組件應(yīng)該繼承 React.Component 父類，可使用父類提供的方法和屬性；

約定3：類組件必須提供render() 方法；

約定4：render 方法必須有返回值，表示該組件結(jié)構(gòu)。

參考代碼如下圖所示。

class Hello extends React.Component {
	render(){
		return  <div>類組件</div>
	}
}
// 渲染函數(shù)組件
ReactDOM.render(<hello />,document.getElementById('root'))

2、事件綁定

React 事件綁定與DOM時(shí)間語(yǔ)法相似。

語(yǔ)法：on+事件名稱={事件處理程序} 如 onClick={() => {}}

注意：React 事件采用駝峰命名法，如 onMouseEnter

方式一-類組件綁定事件

通過(guò) this 關(guān)鍵字獲取事件處理程序。

// 類組件綁定事件
class APP extends React.Component{
	// 事件處理程序
	handleClick(){
	console.log('類組件中事件處理函數(shù)')
	}
	render() {
		return (
			<button onclick={this.handleClick}>點(diǎn)我</button>
		)
	}
}

方式二-函數(shù)組件綁定事件

函數(shù)定義用 function，直接通過(guò) 函數(shù)名即可獲取事件處理程序。

// 函數(shù)組件綁定事件
function APP(){
	// 事件處理程序
	function handleClick(){
		console.log('函數(shù)組件中事件處理函數(shù)')
	}
	return (
		<button onclick={handleClick}>點(diǎn)我</button>
	)
}
// 渲染函數(shù)組件
ReactDOM.render(<APP />,document.getElementById('root'))

到此這篇關(guān)于React組件創(chuàng)建與事件綁定的實(shí)現(xiàn)方法的文章就介紹到這了,更多相關(guān)React組件創(chuàng)建內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: