1
Parent
import React, {Component} from 'react'
import Children from './Children'
export default class Parent extends Component {
constructor(props) {
super(props)
this.state = {
childrenMsg: ''
}
}
getChildrenMsg=(result, msg)=>{
this.setState({
childrenMsg: msg
})
}
render() {
return (
<div style={{display:this.state.childrenMsg}}>
//当使用父组件向子组建传函数时,不能含参,且调用的函数创建时必须使用箭头函数形式 或者 使用function加bind的形式。
<Children get={ this.getChildrenMsg } />
</div>
)
}
}
Children
import React, {Component} from 'react'
export default class Children extends Component {
constructor(props) {
super(props)
this.state = {
msg: 'none'
}
}
toParent(index){
console.log(index+1);
// console.log(this.props.parent.getChildrenMsg.bind(this, this.state.msg))
this.props.get(this, this.state.msg)
}
render() {
return (
<div>
//子组件使用的最稳妥的函数形式,即onClick后跟空箭头函数的形式,这样调用的函数可以使用任何方式创建且不用bind
<button onClick={()=>this.toParent(2) }>
子组件传入给父组件</button>
</div>
)
}
}
2 参考连接https://www.jianshu.com/p/ccc15c5963c4
Parent
import React, {Component} from 'react'
import Children from './Children'
export default class Parent extends Component {
constructor(props) {
super(props)
this.state = {
name: '我是父组件',
msg: '父组件传值给子组件',
childrenMsg: ''
}
}
getChildrenMsg = (result, msg) => {
// console.log(result, msg)
// 很奇怪这里的result就是子组件那bind的第一个参数this,msg是第二个参数
this.setState({
childrenMsg: msg
})
}
render() {
return (
<div>
<h2>{ this.state.name }</h2>
<h3>子组件传来的值为:{ this.state.childrenMsg }</h3>
<h3>我要引入子组件了:</h3>
<hr/>
<Children parent={ this } />
</div>
)
}
}
Children
import React, {Component} from 'react'
export default class Children extends Component {
constructor(props) {
super(props)
this.state = {
name: '我是子组件',
msg: '子组件传值给父组件'
}
}
toParent = () => {
// console.log(this.props.parent.getChildrenMsg.bind(this, this.state.msg))
this.props.parent.getChildrenMsg(this, this.state.msg)
}
render() {
return (
<div>
<h2>{ this.state.name }</h2>
<button onClick={ this.toParent }>子组件传入给父组件</button>
</div>
)
}
}