父组件
//Parent
import React from 'react'
import Child from './Child.jsx'
export default class App extends React.Component{
constructor(){
super()
this.state={}
}
parentClickHandle=(data)=>{
console.log(data);
}
render(){
return(
<div className="App">
<Child onMyEvent={this.parentClickHandle}/>
</div>
)
}
}
子组件
//Child
import React from 'react'
export default class extends React.Component{
constructor(){
super()
this.state={}
}
childClickHandle=()=>{
this.props.onMyEvent("子组件传递的数据")
}
render(){
return(
<div>
<button onClick={this.childClickHandle}>传递数据</button>
</div>
)
}
}
在子组件上点击按钮后,会将事件传递到调用子组件的地方
也就是 父组件调用子组件的地方
//Parent
<Child onMyEvent={this.parentClickHandle}/>
然后又会调用父组件的parentClickHandle事件,从而打印出data