react基础之--子组件向父组件传值

在父组件中定义一个函数，该函数用于处理传递过来得值（比如用于修改父组件中state得数据）
在子组件调用部分通过属性绑定得形式绑定该函数（在子组件中就可以通过this.props.属性名就可以拿到该函数）
在子组件中绑定触发传值得事件比如点击事件，在事件处理函数中通过this.props.属性名（）调用父组件中定义得方法
就可以在父组件中拿到传递过来得值进行使用

具体代码如下：

父组件代码：

import React from 'react'export default class Home extends React.Component{constructor(props) {super(props)this.state = {childMsg:'',}}handleGetMsg = (val)=>{console.log(val);this.setState({childMsg:val})}render (){return (<div><Child getMsg = {this.handleGetMsg}></Child><p>这是子组件传递的消息：{this.state.childMsg}</p></div>)}
}

子组件代码：

import React from 'react'export default class Child extends React.Component{constructor(props){super(props)this.state = {val: '这是子组件向父组件传递的数据'}}// handleSendPMsg = ()=>{//   this.props.getMsg(this.state.val)// }handleSendPMsg (){this.props.getMsg(this.state.val)}render (){return(<div>{/* <button onClick = {this.handleSendPMsg}>子传父</button> */}<button onClick = {this.handleSendPMsg.bind(this)}>子传父</button></div>)}}

备注： handleSendPMsg 函数使用时可以直接以箭头函数的形式写这样的话在调用时不要重新绑定this 如果直接以正常函数的形式去写需要在调用的时候 bind(this)

react基础之--子组件向父组件传值相关推荐

react 子传参父_React 子组件给父组件传值、整个组件、方法
一.准备工作 1.定义一个父组件,名字为Parent /src/component/Parent.js import React, {Component} from 'react' export de ...
react typescript 子组件调用父组件
//父组件 import * as React from 'react'import { Input } from 'antd'const Search = Input.Searchimport &q ...
react 子传参父_React 子组件向父组件传值的方法
本文介绍了React 子组件向父组件传值的方法,分享给大家子组件需要控制自己的 state, 然后告诉父组件自己的state,通过props调用父组件中用来控制state的函数,在父组件中展示子组件 ...
react 子组件回调父组件函数
其实就是父组件将父组件的函数(key:changeState,value:goToBPMS函数)传递给子组件,子组件从props中调用key为changeState的函数,父组件的goToBPMS函数 ...
react子组件向父组件传值
思想: 子组件往父组件传值,父组件中定义一个函数,在子组件中触发,触发的时候子组件把需要传递的数据当作参数传递过去,即可 1.父组件提供一个回调函数(其参数用于接受数据) 2.将函数作为属性的值,利用 ...
【react】子组件向父组件传值
相信已经接触react的同学们,对父子间传值已经不陌生了,但是相对来说,父组件向子组件传值很简单,直接在子组件的标签上传过去,再从子组件的props上结构出来就ok了,但是很多同学还是理解不了如何由 ...
P13: * Component组件拆分、子组件向父组件传递数据
React16 基础阐述新建服务菜单组件父组件向子组件传值子组件向父组件传递数据 warning警告获取数组索引下标子组件调用父组件方法预览最终效果 index.js Xiaojieji ...
子组件向父组件传递数据_如何将元素引用向下传递到角度的组件树中
子组件向父组件传递数据 I recently had a requirement to make sure a PrimeNG Dropdown panel inside a modal with s ...
父html向子html传递参数,子组件向父组件传值
react 子组件怎么向父组件传值 Vue中子组件给父组件传值,父组件接收不到 vue组件在html声明的事件尽量不要用大写的哈,会被解析成小写的,因为html属性是大小写不敏感的另外调用的函数要生 ...

react基础之--子组件向父组件传值

react基础之--子组件向父组件传值相关推荐

最新文章

热门文章