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ù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

React構建組件的幾種方式及區(qū)別
這篇文章主要介紹了React構建組件的幾種方式及區(qū)別，組件就是把圖形、非圖形的各種邏輯均抽象為一個統(tǒng)一的概念來實現(xiàn)開發(fā)的模式文章圍繞主題展開詳細的內容介紹，具有一定的參考價值，需要的朋友可以參考一下
2022-08-08
react-native聊天室|RN版聊天App仿微信實例|RN仿微信界面
這篇文章主要介紹了react-native聊天室|RN版聊天App仿微信實例|RN仿微信界面,需要的朋友可以參考下
2019-11-11
React函數(shù)組件與類的區(qū)別有哪些
函數(shù)式組件的基本意義就是,組件實際上是一個函數(shù),不是類,下面這篇文章主要給大家介紹了關于React中函數(shù)組件與類的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下
2022-10-10
深入淺析react native es6語法
這篇文章主要介紹了深入淺析react native es6語法的相關資料,需要的朋友可以參考下
2015-12-12
React配置代理方式(proxy)
這篇文章主要介紹了React配置代理方式(proxy),具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2024-07-07
react hooks實現(xiàn)防抖節(jié)流的方法小結
這篇文章主要介紹了react hooks實現(xiàn)防抖節(jié)流的幾種方法,文中通過代碼示例給大家講解的非常詳細,對大家的學習或工作有一定的幫助,需要的朋友可以參考下
2024-04-04
每天學習一個hooks?useMount
這篇文章主要為大家介紹了每天學習一個hooks?useMount，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2023-05-05
react.js框架Redux基礎案例詳解
這篇文章主要介紹了react.js框架Redux基礎案例詳解,本篇文章通過簡要的案例,講解了該項技術的了解與使用,以下就是詳細內容,需要的朋友可以參考下
2021-09-09
React使用Redux Toolkit的方法示例
Redux Toolkit可以幫助開發(fā)者更快速、更高效地編寫Redux應用,本文主要介紹了React使用Redux Toolkit的方法示例,具有一定的參考價值,感興趣的可以了解一下
2025-04-04
React經(jīng)典面試題之倒計時組件詳解
這些天也都在面試,面試的內容也大多千篇一律,無外乎vue、react這些框架的一些原理,和使用方法,但是也遇到些有趣的題目,這篇文章主要給大家介紹了關于React經(jīng)典面試題之倒計時組件的相關資料,需要的朋友可以參考下
2022-03-03