生活随笔
收集整理的這篇文章主要介紹了
JSX详解React的事件绑定事件参数的传递
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
一、認識JSX
這段element變量的聲明右側賦值的標簽語法是什么呢？
- 它不是一段字符串（因為沒有使用引號包裹），它看起來是一段HTML原生，但是我們能在js中直接給一個變量賦值html嗎？
- 其實是不可以的，如果我們講 type=“text/babel” 去除掉，那么就會出現語法錯誤；
- 它到底是什么呢？其實它是一段jsx的語法；
JSX是什么？
- JSX是一種JavaScript的語法擴展（eXtension），也在很多地方稱之為JavaScript XML，因為看起就是一段XML語法；
- 它用于描述我們的UI界面，并且其完成可以和JavaScript融合在一起使用；
- 它不同于Vue中的模塊語法，你不需要專門學習模塊語法中的一些指令（比如v-for、v-if、v-else、v-bind）；
為什么React選擇了JSX？
React認為渲染邏輯本質上與其他UI邏輯存在內在耦合
- 比如UI需要綁定事件（button、a原生等等）；
- 比如UI中需要展示數據狀態，在某些狀態發生改變時，又需要改變UI； n 他們之間是密不可分，所以React沒有講標記分離到不同的文件中，而是將它們組合到了一起，這個地方就是組件
（Component）； - 我們只需要知道，JSX其實是嵌入到JavaScript中的一種結構語法；
JSX的書寫規范：
- JSX的頂層只能有一個根元素，所以我們很多時候會在外層包裹一個div原生（或者使用后面我們學習的Fragment）；
- 為了方便閱讀，我們通常在jsx的外層包裹一個小括號()，這樣可以方便閱讀，并且jsx可以進行換行書寫；
- JSX中的標簽可以是單標簽，也可以是雙標簽；
注意：如果是單標簽，必須以/>結尾；
二、JSX的使用
jsx中的注釋
JSX嵌入變量
-
情況一：當變量是Number、String、Array類型時，可以直接顯示
-
情況二：當變量是null、undefined、Boolean類型時，內容為空； 如果希望可以顯示null、undefined、Boolean，那么需要轉成字符串； 轉換的方式有很多，比如toString方法、和空字符串拼接，String(變量)等方式；
-
情況三：對象類型不能作為子元素（not valid as a React child）
<!DOCTYPE html
>
<html lang
="en">
<head
><meta charset
="UTF-8"><meta name
="viewport" content
="width=device-width, initial-scale=1.0"><title
>Document
</title
>
</head
>
<body
><div id
="app"></div
><script src
="../react/react.development.js"></script
><script src
="../react/react-dom.development.js"></script
><script src
="../react/babel.min.js"></script
><script type
="text/babel">class App extends React.Component {constructor(props) {super(props
);this.state
= {name
: "why", age
: 18, names
: ["abc", "cba", "nba"], test1
: null, test2
: undefined, test3
: true, flag
: true,}}render() {return (<div
><h2
>{this.state
.name
}</h2
><h2
>{this.state
.age
}</h2
><h2
>{this.state
.names
}</h2
><h2
>{this.state
.test1
+ ""}</h2
><h2
>{this.state
.test2
+ ""}</h2
><h2
>{this.state
.test3
.toString()}</h2
><h2
>{this.state
.flag
? "你好啊": null}</h2
><h2
>{this.state
.friend
}</h2
></div
>)}}ReactDOM
.render(<App
/>, document
.getElementById("app"));</script
></body
>
</html
>
JSX嵌入表達式
jsx綁定屬性
- 比如元素都會有title屬性
- 比如img元素會有src屬性
- 比如a元素會有href屬性
- 比如元素可能需要綁定class
- 比如原生使用內聯樣式style
<!DOCTYPE html
>
<html lang
="en"><head
><meta charset
="UTF-8"><meta name
="viewport" content
="width=device-width, initial-scale=1.0"><title
>Document
</title
>
</head
><body
><div id
="app"></div
><div style
="color: red; font-size: 30px;"></div
><script src
="../react/react.development.js"></script
><script src
="../react/react-dom.development.js"></script
><script src
="../react/babel.min.js"></script
><script type
="text/babel">function getSizeImage(imgUrl, size) {return imgUrl
+ `?param=${size}x${size}`}class App extends React.Component {constructor(props) {super(props
);this.state
= {title
: "標題",imgUrl
: "http://p2.music.126.net/L8IDEWMk_6vyT0asSkPgXw==/109951163990535633.jpg",link
: "http://www.baidu.com",active
: true}}render() {const { title
, imgUrl
, link
, active
} = this.state
;return (<div
>{}<h2 title
={title
}>我是標題
</h2
><img src
={getSizeImage(imgUrl
, 140)} alt
=""/><a href
={link
} target
="_blank">百度一下
</a
>{}<div className
="box title">我是div元素
</div
><div className
={"box title " + (active
? "active": "")}>我也是div元素
</div
><label htmlFor
=""></label
>{}<div style
={{color
: "red", fontSize
: "50px"}}>我是div
,綁定style屬性
</div
></div
>)}}ReactDOM
.render(<App
/>, document
.getElementById("app"));</script
>
</body
></html
>
三、React事件綁定
如果原生DOM原生有一個監聽事件，我們可以如何操作呢？
方式一：獲取DOM原生，添加監聽事件；
方式二：在HTML原生中，直接綁定onclick；
在React中是如何操作呢？
我們來實現一下React中的事件監聽，這里主要有兩點不同:
React 事件的命名采用小駝峰式（camelCase），而不是純小寫。
例如原生中的onclick="btnClick"，在React中需要寫成onClick={btnClick}我們需要通過{}傳入一個事件處理函數，這個函數會在事件發生時被執行；
在事件執行后，我們可能需要獲取當前類的對象中相關的屬性，這個時候需要用到this，如果我們這里直接打印this，也會發現它是一個undefined。
為什么是undefined呢？
原因是btnClick函數并不是我們主動調用的，而且當button按鈕被點擊時，React內部調用了btnClick函數，而它內部調用時，并不知道要如何綁定正確的this；
如何解決this的問題呢？
方案一：bind給btnClick顯式綁定this
方案二：定義函數時使用箭頭函數，使用 ES6 class fields 語法
方案三：事件監聽時傳入箭頭函數（推薦）
四、事件參數傳遞
在執行事件函數時，有可能我們需要獲取一些參數信息：比如event對象、其他參數
情況一：獲取event對象
- 很多時候我們需要拿到event對象來做一些事情（比如阻止默認行為）
- 假如我們用不到this，那么直接傳入函數就可以獲取到event對象；
情況二：獲取更多參數
- 有更多參數時，我們最好的方式就是傳入一個箭頭函數，主動執行的事件函數，并且傳入相關的其他參數；
<!DOCTYPE html
>
<html lang
="en"><head
><meta charset
="UTF-8"><meta http
-equiv
="X-UA-Compatible" content
="IE=edge"><meta name
="viewport" content
="width=device-width, initial-scale=1.0"><title
>Document
</title
>
</head
><body
><div id
="app"></div
><button id
="btn">原生
</button
><script src
="../react/react.development.js"></script
><script src
="../react/react-dom.development.js"></script
><script src
="../react/babel.min.js"></script
><script type
="text/babel">document
.getElementById('btn').addEventListener('click', function (event) {console
.log(event
);})class App extends React.Component {constructor(props) {super(props
)this.state
= {movies
: ['流浪地球', '溫暖的抱抱', '盜夢空間']}this.btnClick
= this.btnClick.bind(this)}render() {return (<div
><button onClick
={this.btnClick
}>按鈕
</button
><ul
>{this.state
.movies
.map((item, index, arr) => {return (<li className
="item"onClick
={(event) => {this.liClick(item
, index
, event
)}} key
={index
}>{item
}</li
>)})}</ul
></div
>)}btnClick(event) {console
.log(event
);console
.log('按鈕發生點擊', this);}liClick(item, index, event) {console
.log('li發生了點擊', item
, index
, event
);}}ReactDOM
.render(<App
/>, document
.getElementById('app'))</script
>
</body
></html
>
總結
以上是生活随笔為你收集整理的JSX详解React的事件绑定事件参数的传递的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
