React父子组件间的传值的方法
更新时间：2018年11月13日 14:14:09 作者：Rossy1
在单页面里面，父子组件传值是比较常见的，这篇文章主要介绍了React父子组件间的传值的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
父组件向子组件传值：
父组件：
import React, { Component } from 'react';
import Child from './chlid';
class parent extends Component{
constructor(props) {
super(props);
this.state = {
txt0:"默认值0",
txt1:"默认值1"
}
}
componentDidMount(){
}
parToson(){
this.setState({
txt0:"哈哈哈哈"
})
}
sonToPar(e){
this.setState({
txt1:e
})
}
render(){
const style={
paddingLeft:"150px"
}
return(
<div style={style}>
<button onClick={this.parToson.bind(this)}>传值给子组件</button>
<div>接受子组件的传值为：{this.state.txt1}</div>
<br/>
<Child message={this.state.txt0} getsonToPar={this.sonToPar.bind(this)}/>
</div>
)
}
}
子组件：
import React, { Component } from 'react';
class child extends Component{
constructor(props) {
super(props);
this.state = {
msg:"啦啦啦啦"
}
}
componentDidMount(){
}
render(){
return(
<div>
<div>接受父组件传的值为：{this.props.message}</div>
<button onClick={()=>this.props.getsonToPar(this.state.msg)}>传值给父组件</button>
</div>
)
}
}
export default child;
github：https://github.com/Rossy11/react/blob/master/src/component/router4.js
补充：
子组件向父组件传值，
同样是父组件：
import React from "react"
import ComentList from "./ComentList"
class Comment extends React.Component {
constructor(props) {
super(props);
this.state = {
parentText: "this is parent text",
arr: [{
"userName": "fangMing", "text": "123333", "result": true
}, {
"userName": "zhangSan", "text": "345555", "result": false
}, {
"userName": "liSi", "text": "567777", "result": true
}, {
"userName": "wangWu", "text": "789999", "result": true
},]
}
}
fn(data) {
this.setState({
parentText: data //把父组件中的parentText替换为子组件传递的值
},() =>{
console.log(this.state.parentText);//setState是异步操作，但是我们可以在它的回调函数里面进行操作
});
}
render() {
return (
<div>
//通过绑定事件进行值的运算，这个地方一定要记得.bind(this)，
不然会报错，切记切记，因为通过事件传递的时候this的指向已经改变
<ComentList arr={this.state.arr} pfn={this.fn.bind(this)}>
</ComentList>
<p>
text is {this.state.parentText}
</p>
</div>
)
}
}
export default Comment;
子组件：
import React from "react"
class ComentList extends React.Component {
constructor(props) {
super(props);
this.state = ({
childText: "this is child text"
})
}
clickFun(text) {
this.props.pfn(text)//这个地方把值传递给了props的事件当中
}
render() {
return (
<div className="list">
<ul>
{
this.props.arr.map(item => {
return (
<li key={item.userName}>
{item.userName} 评论是:{item.text}
</li>
)
})
}
</ul>
//通过事件进行传值，如果想得到event，可以在参数最后加一个event，
这个地方还是要强调，this，this，this
<button onClick={this.clickFun.bind(this, this.state.childText)}>
click me
</button>
</div>
)
}
}
export default ComentList;
before：
after：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
聊聊ant design charts 获取后端接口数据展示问题
今天在做项目的时候遇到几个让我很头疼的问题，一个是通过后端接口成功访问并又返回数据，但拿不到数据值。其二是直接修改state中的data，console中数组发生变化但任然数据未显示，这篇文章主要介绍了ant design charts 获取后端接口数据展示,需要的朋友可以参考下2022-05-05
这篇文章主要为大家介绍了Remix 路由模块输出对象handle函数使用详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-04-04
React 中hooks之 React.memo 和 useMemo用法示例总结
React.memo是一个高阶组件,用于优化函数组件的性能,通过记忆组件渲染结果来避免不必要的重新渲染,合理使用React.memo和useMemo可以显著提升React应用的性能,本文介绍React 中hooks之 React.memo 和 useMemo用法总结,感兴趣的朋友一起看看吧2025-01-01
本文将深入探讨React与闭包之间的关系，我们将首先介绍React和闭包的基本概念，然后详细解释React组件中如何使用闭包来处理状态和作用域的问题，希望通过本文的阅读，你将对React中闭包的概念有更深入的理解，并能够在开发React应用时更好地应用闭包2023-07-07
本文主要介绍了react 路由Link配置详解，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-11-11
本文介绍了React中六种常见的路由跳转方式,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2025-03-03
这篇文章主要介绍了react native 原生模块桥接的简单说明小结，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-02-02
这篇文章主要为大家介绍了如何在Remix中使用tailwindcss方法详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-05-05
这篇文章主要介绍了React使用hook如何实现数据双向绑定方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
这篇文章主要介绍了在react中使用tailwind的问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
最新评论