快捷導(dǎo)航

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)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

React中實(shí)現(xiàn)使用條件渲染來顯示不同的內(nèi)容
在React中,條件渲染是根據(jù)不同的條件選擇性地渲染組件,本文介紹了三種常見的條件渲染方式：使用if語句、使用三元運(yùn)算符和使用短路運(yùn)算符,通過這些方法,我們可以根據(jù)應(yīng)用的狀態(tài)和用戶的操作動(dòng)態(tài)地顯示不同的內(nèi)容,從而提升用戶體驗(yàn)和組件的可維護(hù)性
2025-02-02
react中hooks使用useState的更新不觸發(fā)dom更新問題及解決
這篇文章主要介紹了react中hooks使用useState的更新不觸發(fā)dom更新問題及解決,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-01-01
React Hook useState useEffect componentD
這篇文章主要介紹了React Hook useState useEffect componentDidMount componentDidUpdate componentWillUnmount問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-03-03
詳解React Native網(wǎng)絡(luò)請(qǐng)求fetch簡單封裝
本篇文章主要介紹了詳解React Native網(wǎng)絡(luò)請(qǐng)求fetch簡單封裝，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2017-08-08
React事件節(jié)流效果失效的原因及解決
這篇文章主要介紹了React事件節(jié)流效果失效的原因及解決，幫助大家更好的理解和學(xué)習(xí)使用React框架，感興趣的朋友可以了解下
2021-04-04
React中this丟失的四種解決方法
這篇文章主要給大家介紹了關(guān)于React中this丟失的四種解決方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者使用React具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧
2019-03-03
ReactJs快速入門教程(精華版)
React 起源于 Facebook 的內(nèi)部項(xiàng)目，因?yàn)樵摴緦?duì)市場(chǎng)上所有 JavaScript MVC 框架，都不滿意，就決定自己寫一套，用來架設(shè) Instagram 的網(wǎng)站.這篇文章主要介紹了ReactJs快速入門教程(精華版)的相關(guān)資料,需要的朋友可以參考下
2016-11-11
解決React報(bào)錯(cuò)Parameter 'props' implicitly&nb
這篇文章主要為大家介紹了React報(bào)錯(cuò)Parameter 'props' implicitly has an 'any' type的解決處理方法，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-12-12
ReactNative支付密碼輸入框?qū)崿F(xiàn)詳解
這篇文章主要為大家介紹了ReactNative支付密碼輸入框?qū)崿F(xiàn)詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-11-11
react如何將字符串轉(zhuǎn)義成html語句
這篇文章主要介紹了react如何將字符串轉(zhuǎn)義成html語句問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-12-12