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

更新時間：2022年12月26日 10:28:04 作者：夢幻通靈

react事件綁定時。this并不會指向當前DOM元素。往往使用bind來改變this指向，今天通過本文給大家介紹React事件綁定的方式，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習吧

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

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

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

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

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

如果返回值為null，則不渲染任何內容

參考代碼如下圖所示。

// 方式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：類名必須是大寫字母開頭；

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

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

約定4：render 方法必須有返回值，表示該組件結構。

參考代碼如下圖所示。

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

2、事件綁定

React 事件綁定與DOM時間語法相似。

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

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

方式一-類組件綁定事件

通過 this 關鍵字獲取事件處理程序。

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

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

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

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

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

您可能感興趣的文章: