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

React 子組件向父組件傳值的方法

 更新時(shí)間:2017年07月24日 08:26:41   作者:化風(fēng)  
本篇文章主要介紹了React 子組件向父組件傳值的方法,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧

本文介紹了React 子組件向父組件傳值的方法,分享給大家

子組件需要控制自己的 state, 然后告訴父組件自己的state,通過props調(diào)用父組件中用來控制state的函數(shù),在父組件中展示子組件的state變化。

/***實(shí)現(xiàn)在輸入框輸入郵箱時(shí),在div中即時(shí)顯示輸入內(nèi)容***/


<body>
  <div id="test"></div>
</body>

//子組件
var Child = React.createClass({
  render: function(){
    return (
      <div>
        郵箱:<input onChange={this.props.handleEmail}/>
      </div>
    )
  }
});

//父組件
var Parent = React.createClass({
  getInitialState: function(){
    return {
      email: ''
    }
  },
  handleEmail: function(event){
    this.setState({email: event.target.value});
  },
  render: function(){
    return (
      <div>
        <div>郵箱:{this.state.email}</div>
        <Child name="email" handleEmail={this.handleEmail.bind(this)}/>
      </div>
    )
  }
});
React.render(
 <Parent />,
 document.getElementById('test')
);

原理:

依賴 props 來傳遞事件的引用,并通過回調(diào)的方式來實(shí)現(xiàn)的,這樣實(shí)現(xiàn)不是特別好,但在沒有任何工具的情況下是一種簡單的實(shí)現(xiàn)方式。

分析:

React中當(dāng)state發(fā)生改變時(shí),組件才會(huì)update。在父組件中設(shè)定state的初始值以及處理該state的函數(shù),同時(shí)將函數(shù)名通過以props屬性值的形式傳入子組件,子組件通過調(diào)用父組件的函數(shù),進(jìn)而引起state變化,達(dá)到在父組件中展示子組件產(chǎn)生的變化。

以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

  • react頁面中存在多個(gè)input時(shí)巧妙設(shè)置value屬性方式

    react頁面中存在多個(gè)input時(shí)巧妙設(shè)置value屬性方式

    這篇文章主要介紹了react頁面中存在多個(gè)input時(shí)巧妙設(shè)置value屬性方式,具有很好的參考價(jià)值,希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2023-05-05
  • React合成事件詳解

    React合成事件詳解

    這篇文章主要介紹了React合成事件的相關(guān)資料,幫助大家更好的理解和學(xué)習(xí)使用React,感興趣的朋友可以了解下
    2021-05-05
  • React中的Hooks路由跳轉(zhuǎn)問題

    React中的Hooks路由跳轉(zhuǎn)問題

    這篇文章主要介紹了React中的Hooks路由跳轉(zhuǎn)問題,具有很好的參考價(jià)值,希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-12-12
  • 用react-redux實(shí)現(xiàn)react組件之間數(shù)據(jù)共享的方法

    用react-redux實(shí)現(xiàn)react組件之間數(shù)據(jù)共享的方法

    這篇文章主要介紹了用react-redux實(shí)現(xiàn)react組件之間數(shù)據(jù)共享的方法,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2018-06-06
  • React拆分窗格組件的兩種方法

    React拆分窗格組件的兩種方法

    這篇文章主要介紹了React拆分窗格組件的兩種方法,使用第三方庫react-split-pane適用于快速實(shí)現(xiàn)拆分窗格功能,并且對功能和樣式的要求較為簡單的場景,本文結(jié)合示例代碼介紹的非常詳細(xì),需要的朋友可以參考下
    2023-07-07
  • react18?hooks自定義移動(dòng)端Popup彈窗組件RcPop

    react18?hooks自定義移動(dòng)端Popup彈窗組件RcPop

    這篇文章主要介紹了react18?hooks自定義移動(dòng)端Popup彈窗組件RcPop,react-popup?基于react18+hook自定義多功能彈框組件,整合了msg/alert/dialog/toast及android/ios彈窗效果,需要的朋友可以參考下
    2023-08-08
  • 如何在 React 中使用 substring() 方法

    如何在 React 中使用 substring() 方法

    這篇文章主要介紹了在 React 中使用 substring() 方法,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2023-09-09
  • 深入學(xué)習(xí)TypeScript 、React、 Redux和Ant-Design的最佳實(shí)踐

    深入學(xué)習(xí)TypeScript 、React、 Redux和Ant-Design的最佳實(shí)踐

    這篇文章主要介紹了深入學(xué)習(xí)TypeScript 、React、 Redux和Ant-Design的最佳實(shí)踐,TypeScript 增加了代碼的可讀性和可維護(hù)性,擁有活躍的社區(qū),,需要的朋友可以參考下
    2019-06-06
  • React中實(shí)現(xiàn)父組件調(diào)用子組件的三種方法

    React中實(shí)現(xiàn)父組件調(diào)用子組件的三種方法

    在React中,組件之間的通信是一個(gè)常見的需求,有時(shí),我們需要從父組件調(diào)用子組件的方法,這可以通過幾種不同的方式實(shí)現(xiàn),需要的朋友可以參考下
    2024-04-04
  • react 應(yīng)用多入口配置及實(shí)踐總結(jié)

    react 應(yīng)用多入口配置及實(shí)踐總結(jié)

    這篇文章主要介紹了react 應(yīng)用多入口配置及實(shí)踐總結(jié),小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2018-10-10

最新評論