日韩性视频-久久久蜜桃-www中文字幕-在线中文字幕av-亚洲欧美一区二区三区四区-撸久久-香蕉视频一区-久久无码精品丰满人妻-国产高潮av-激情福利社-日韩av网址大全-国产精品久久999-日本五十路在线-性欧美在线-久久99精品波多结衣一区-男女午夜免费视频-黑人极品ⅴideos精品欧美棵-人人妻人人澡人人爽精品欧美一区-日韩一区在线看-欧美a级在线免费观看

歡迎訪問 生活随笔！

生活随笔

當前位置： 首頁 > 前端技术 > javascript >内容正文

javascript

JSX详解React的事件绑定事件参数的传递

發布時間：2024/7/5 javascript 34 豆豆
生活随笔 收集整理的這篇文章主要介紹了 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 = {// 1.在{}中可以正常顯示顯示的內容name: "why", // Stringage: 18, // Numbernames: ["abc", "cba", "nba"], // Array// 2.在{}中不能顯示(忽略)test1: null, // nulltest2: undefined, // undefinedtest3: true, // Booleanflag: true,// 3.對象不能作為jsx的子類// friend: {// name: "kobe",// age: 40// }}}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>{/* 1.綁定普通屬性 */}<h2 title={title}>我是標題</h2><img src={getSizeImage(imgUrl, 140)} alt=""/><a href={link} target="_blank">百度一下</a>{/* 2.綁定class */}<div className="box title">我是div元素</div><div className={"box title " + (active ? "active": "")}>我也是div元素</div><label htmlFor=""></label>{/* 3.綁定style */}<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的事件绑定事件参数的传递的全部內容，希望文章能夠幫你解決所遇到的問題。

    如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。