React子组件向父组件传递参数

it2024-08-22  45

父组件

//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

最新回复(0)