本文摘自PHP中文网,作者青灯夜游,侵删。
react子组件向父组件传值的方法:在父组件中设定state的初始值以及处理该state的函数,同时将函数名通过以props属性值的形式传入子组件,子组件通过调用父组件的函数,进而引起state变化,达到在父组件中展示子组件产生的变化。
本教程操作环境:windows7系统、React16版,该方法适用于所有品牌电脑。
相关推荐:《React视频教程》
子组件需要控制自己的 state, 然后告诉父组件自己的state,通过props调用父组件中用来控制state的函数,在父组件中展示子组件的state变化。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 | <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' )
);
|
原理:
阅读剩余部分
相关阅读 >>
webpack 不识别React怎么办
React中portal是什么意思
React grommet是什么
混合开发可以用React吗
vue和React有什么相似点
React中如何引入css样式
谷歌怎么调试React项目
React native怎么注释代码
React是什么框架
React中什么是hoc
更多相关阅读请进入《React》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » react子组件怎么向父组件传值?