父组件给子组件传值用props
子组件給父组件传值用方法调用
import React, { Component } from 'react'
//子组件
class Counter extends Component {
constructor(props) {
super(props);
this.state = {
count: 1
}
}
clickHandle () {
const { count } = this.state;
this.setState({
count: count + 1
},//
function () {
//在state数据改变之后调用父组件传递过来的属性中的函数 来修改对应的数据
this.props.childClickHandle(this.state.count);
}
)
}
render () {
const { count } = this.state;
return (
<div>
<button onClick={() => this.clickHandle()}>点我:{count}</button>
</div>
)
}
}
父组件
export class Count extends Component {
constructor(props) {
super(props);
this.state = {
fromChild: 1
}
}
childClickHandle (v) {
this.setState({
fromChild: v
})
}
render () {
return (
<div>
<h3>当前值为:{this.state.fromChild}</h3>
// 通过属性把父组件中的函数 childClickHandle 传递给子组件
<Counter childClickHandle={this.childClickHandle.bind(this)} />
</div>
)
}
}