溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章給大家分享的是有關react子組件如何向父組件傳值的內容。小編覺得挺實用的，因此分享給大家做個參考。一起跟隨小編過來看看吧。
react中，在父組件中設定state的初始值以及處理該state的函數，同時將函數名通過以props屬性值的形式傳入子組件，子組件通過調用父組件的函數，進而引起state變化，達到在父組件中展示子組件產生的變化。
子組件需要控制自己的 state， 然后告訴父組件自己的state，通過props調用父組件中用來控制state的函數，在父組件中展示子組件的state變化。
/***實現在輸入框輸入郵箱時，在p中即時顯示輸入內容***/
<body>
<p id="test"></p>
</body>
//子組件
var Child = React.createClass({
render: function(){
return (
<p>
郵箱：<input onChange={this.props.handleEmail}/>
</p>
)
}
});
//父組件
var Parent = React.createClass({
getInitialState: function(){
return {
email: ''
}
},
handleEmail: function(event){
this.setState({email: event.target.value});
},
render: function(){
return (
<p>
<p>郵箱：{this.state.email}</p>
<Child name="email" handleEmail={this.handleEmail.bind(this)}/>
</p>
)
}
});
React.render(
<Parent />,
document.getElementById('test')
);原理：
依賴 props 來傳遞事件的引用，并通過回調的方式來實現的，這樣實現不是特別好，但在沒有任何工具的情況下是一種簡單的實現方式。
分析：
React中當state發生改變時，組件才會update。在父組件中設定state的初始值以及處理該state的函數，同時將函數名通過以props屬性值的形式傳入子組件，子組件通過調用父組件的函數，進而引起state變化，達到在父組件中展示子組件產生的變化。
感謝各位的閱讀！關于react子組件如何向父組件傳值就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
