react中,本身没有提供主动的子传父方法,实现方式就是回调函数。由父组件通过props传递给子组件一个方法,然后通过子组件调用这个方法实现子=>父通讯。
import React, { Component } from 'react';
/**父组件 */
export default class Index extends Component {
state = {
msg: 0
}
handleChange = (msg) => {
this.setState({
msg
})
}
render() {
return (
<div>
{/* 通过props传递onChange这个方法 */}
<SonComponent onChange={this.handleChange} msg={this.state.msg} />
</div>
);
}
}
/**子组件 */
const SonComponent = (props) => {
return (
/**在点击事件中触发父组件的onChange方法 */
<div onClick={()=>props.onChange(+props.msg+1)} >
{props.msg}
</div>
)
}