React 子組件向父組件傳值的方法
更新時間：2017年07月24日 08:26:41 作者：化風
本篇文章主要介紹了React 子組件向父組件傳值的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
本文介紹了React 子組件向父組件傳值的方法，分享給大家
子組件需要控制自己的 state， 然后告訴父組件自己的state，通過props調用父組件中用來控制state的函數(shù)，在父組件中展示子組件的state變化。
/***實現(xiàn)在輸入框輸入郵箱時，在div中即時顯示輸入內容***/
<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 來傳遞事件的引用，并通過回調的方式來實現(xiàn)的，這樣實現(xiàn)不是特別好，但在沒有任何工具的情況下是一種簡單的實現(xiàn)方式。
分析：
React中當state發(fā)生改變時，組件才會update。在父組件中設定state的初始值以及處理該state的函數(shù)，同時將函數(shù)名通過以props屬性值的形式傳入子組件，子組件通過調用父組件的函數(shù)，進而引起state變化，達到在父組件中展示子組件產生的變化。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
react頁面中存在多個input時巧妙設置value屬性方式
這篇文章主要介紹了react頁面中存在多個input時巧妙設置value屬性方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-05-05
這篇文章主要介紹了React合成事件的相關資料，幫助大家更好的理解和學習使用React，感興趣的朋友可以了解下2021-05-05
這篇文章主要介紹了React中的Hooks路由跳轉問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-12-12
用react-redux實現(xiàn)react組件之間數(shù)據(jù)共享的方法
這篇文章主要介紹了用react-redux實現(xiàn)react組件之間數(shù)據(jù)共享的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-06-06
這篇文章主要介紹了React拆分窗格組件的兩種方法,使用第三方庫react-split-pane適用于快速實現(xiàn)拆分窗格功能，并且對功能和樣式的要求較為簡單的場景，本文結合示例代碼介紹的非常詳細，需要的朋友可以參考下2023-07-07
react18?hooks自定義移動端Popup彈窗組件RcPop
這篇文章主要介紹了react18?hooks自定義移動端Popup彈窗組件RcPop,react-popup?基于react18+hook自定義多功能彈框組件,整合了msg/alert/dialog/toast及android/ios彈窗效果,需要的朋友可以參考下2023-08-08
這篇文章主要介紹了在 React 中使用 substring() 方法,本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-09-09
深入學習TypeScript 、React、 Redux和Ant-Design的最佳實踐
這篇文章主要介紹了深入學習TypeScript 、React、 Redux和Ant-Design的最佳實踐，TypeScript 增加了代碼的可讀性和可維護性，擁有活躍的社區(qū)，,需要的朋友可以參考下2019-06-06
在React中,組件之間的通信是一個常見的需求,有時,我們需要從父組件調用子組件的方法,這可以通過幾種不同的方式實現(xiàn),需要的朋友可以參考下2024-04-04
這篇文章主要介紹了react 應用多入口配置及實踐總結，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-10-10