欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

React事件處理和表單的綁定詳解

 更新時間:2022年08月31日 15:30:35   作者:小綿楊Yancy  
這篇文章主要介紹了React事件處理和表單的綁定,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

一、事件處理

1.1 React事件

React 元素的事件處理和 DOM 元素類似。但是有一點語法上的不同:

  • React 事件綁定屬性的命名采用駝峰式寫法,而不是小寫。 例如onclick屬性應(yīng)該寫成onClick。
  • 如果采用 JSX的語法你需要傳入一個函數(shù)作為事件處理函數(shù),而不是一個字符串(DOM 元素的寫法)。例如已經(jīng)定義了一個名為handleClick的函數(shù),應(yīng)該這樣調(diào)用:
<button onClick={<!--{cke_protected}{C}%3C!%2D%2D%20%2D%2D%3E-->handleClick}>Button</button>

而不是:

<button onClick="handleClick()">Button</button>

1.2 事件對象

在事件發(fā)生時調(diào)用的函數(shù),默認(rèn)是自帶一個參數(shù)的,這個參數(shù)通常被命名為event,就是事件對象。

例如,我們?yōu)橐粋€input輸入框的onchange事件設(shè)置一個函數(shù),獲取事件對象。

<!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>EventObject</title>
    <script src="https://cdn.staticfile.org/react/16.8.0/umd/react.development.js"></script>
    <script src="https://cdn.staticfile.org/react-dom/16.8.0/umd/react-dom.development.js"></script>
    <!-- 生產(chǎn)環(huán)境中不建議使用 -->
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
  </head>
  <body>
    <div id="app"></div>
    <script type="text/babel">
      class MyInput extends React.Component {
        constructor(props) {
          super(props);
          this.handleChange = this.handleChange.bind(this);
        }
        handleChange(event) {
          console.log(event);
          console.log(event.target);
        }
        render() {
          return (
            <div>
              <span>Input:</span>
              <input type="text" onChange={this.handleChange} />
            </div>
          );
        }
      }
      ReactDOM.render(<MyInput />, document.getElementById("app"));
    </script>
  </body>
</html>

可以看到,event.target就是觸發(fā)事件的dom元素。

1.3 事件傳參

除了自帶的默認(rèn)參數(shù)(事件對象)外,有時候我們需要額外傳遞傳輸給事件處理的函數(shù),這個時候不能直接調(diào)用函數(shù)并傳參,例如下面的用法是錯誤的:

<input type="text" onChange={<!--{cke_protected}{C}%3C!%2D%2D%20%2D%2D%3E-->this.handleChange(1)} />

正確的用法應(yīng)該是使用匿名函數(shù)來實現(xiàn)傳參:

<input type="text" onChange={() => this.handleChange(event, "id")}/>

此時處理函數(shù)handleChange:

handleChange(event, id) {
      console.log(event.target.value);
      console.log(id);
}

第一個參數(shù)一定是事件對象,后面的參數(shù)名稱隨意,但是順序必須一一對應(yīng)。

1.4 函數(shù)組件事件處理

通過上面的例子不難看出,class組件有一個非常麻煩的點在于必須在構(gòu)造函數(shù)中聲明并綁定方法的this:

右邊中的this:這個this是在構(gòu)造器方法中的,所以它的指向是組件的實例對象;

右邊handleChange方法:這個方法是在類的原型對象上的;而使用bind的函數(shù)把這個原型對象方法上的this修改成類實例對象上的this,右邊的代碼執(zhí)行完成之后生成一個新的函數(shù),然后把這個新函數(shù)放到實例的自身上也就是等式的左邊,且給這個函數(shù)起了一個名字(左邊方法名),這樣就能解決原型方法上其他方法調(diào)用該方法this指向是undefined的問題了。此時其他方法調(diào)用該函數(shù)時this就指向的是實例對象了

而函數(shù)式組件中,就簡單了許多:

<!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>EventObject</title>
    <script src="https://cdn.staticfile.org/react/16.8.0/umd/react.development.js"></script>
    <script src="https://cdn.staticfile.org/react-dom/16.8.0/umd/react-dom.development.js"></script>
    <!-- 生產(chǎn)環(huán)境中不建議使用 -->
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
  </head>
  <body>
    <div id="app"></div>
    <script type="text/babel">
      function MyInput() {
        function handleChange(event, id) {
          console.log(event.target.value);
          console.log(id);
        }
        return (
          <div>
            <span>Input:</span>
            <input type="text" onChange={() => handleChange(event, "id")} />
          </div>
        );
      }
      ReactDOM.render(<MyInput />, document.getElementById("app"));
    </script>
  </body>
</html>

二、表單

雙向綁定

在vue中,可以使用v-model指令實現(xiàn)表單的雙向綁定,但是實際上,v-model只是v-bind和v-on的語法糖,在react中,我們可以直接利用屬性和屬性改變的處理事件實現(xiàn)雙向綁定的功能。

<!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>Form</title>
    <script src="https://cdn.staticfile.org/react/16.8.0/umd/react.development.js"></script>
    <script src="https://cdn.staticfile.org/react-dom/16.8.0/umd/react-dom.development.js"></script>
    <!-- 生產(chǎn)環(huán)境中不建議使用 -->
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
  </head>
  <body>
    <div id="app"></div>
    <script type="text/babel">
      class HelloMessage extends React.Component {
        constructor(props) {
          super(props);
          this.state = { value: "Hello React!" };
          this.handleChange = this.handleChange.bind(this);
        }
        handleChange(event) {
          this.setState({ value: event.target.value });
        }
        render() {
          let value = this.state.value;
          return (
            <div>
              <input type="text" value={value} onChange={this.handleChange} />
              <h4>{value}</h4>
            </div>
          );
        }
      }
      ReactDOM.render(<HelloMessage />, document.getElementById("app"));
    </script>
  </body>
</html>

到此這篇關(guān)于React事件處理和表單的綁定詳解的文章就介紹到這了,更多相關(guān)React事件處理 內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

  • React createElement方法使用原理分析介紹

    React createElement方法使用原理分析介紹

    這篇文章主要為大家介紹了React的createElement方法源碼解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2022-09-09
  • 利用ES6語法重構(gòu)React組件詳解

    利用ES6語法重構(gòu)React組件詳解

    這篇文章主要介紹了利用ES6語法重構(gòu)React組件的相關(guān)資料,文中通過示例代碼介紹的很詳細(xì),對大家具有一定的參考借鑒價值,需要的朋友們下面來一起看看吧。
    2017-03-03
  • 使用React+ts實現(xiàn)無縫滾動的走馬燈詳細(xì)過程

    使用React+ts實現(xiàn)無縫滾動的走馬燈詳細(xì)過程

    這篇文章主要給大家介紹了關(guān)于使用React+ts實現(xiàn)無縫滾動的走馬燈詳細(xì)過程,文中給出了詳細(xì)的代碼示例以及圖文教程,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下
    2023-08-08
  • React和Vue組件更新的實現(xiàn)及區(qū)別

    React和Vue組件更新的實現(xiàn)及區(qū)別

    React 和 Vue 都是當(dāng)今最流行的前端框架,它們都實現(xiàn)了組件化開發(fā)模式,本文將從React和Vue的組件更新原理入手,剖析兩者虛擬DOM difer算法的異同點,具有一定的參考價值,感興趣的可以了解一下
    2024-02-02
  • React組件渲染后對DOM的操作方式

    React組件渲染后對DOM的操作方式

    這篇文章主要介紹了React組件渲染后對DOM的操作方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2023-02-02
  • 解決React Native端口號修改的方法

    解決React Native端口號修改的方法

    這篇文章主要介紹了解決React Native端口號修改的方法,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2017-07-07
  • React-Router6版本的更新引起的路由用法變化

    React-Router6版本的更新引起的路由用法變化

    本文主要介紹了React-Router6版本的更新引起的路由用法變化,文中通過示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2022-01-01
  • React路由管理之React Router總結(jié)

    React路由管理之React Router總結(jié)

    React項目通常都有很多的URL需要管理,最常使用的解決方案就是React Router了,本篇文章主要介紹了React路由管理之React Router總結(jié),小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-05-05
  • react在安卓中輸入框被手機鍵盤遮擋問題的解決方法

    react在安卓中輸入框被手機鍵盤遮擋問題的解決方法

    這篇文章主要給大家介紹了關(guān)于react在安卓中輸入框被手機鍵盤遮擋問題的解決方法,文中通過圖文以及示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面來一起看看吧
    2018-09-09
  • react嵌套路由實現(xiàn)TabBar的實現(xiàn)

    react嵌套路由實現(xiàn)TabBar的實現(xiàn)

    本文主要介紹了react嵌套路由實現(xiàn)TabBar的實現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2022-08-08

最新評論