如何在React js中从子级到父级调用多个onclick函数

Question

import React from 'react';
import './App.css';
import ChildComponent from './component/childComponent';
class ParentComponent extends React.Component{
	constructor(){
		super();
		this.state = {
			isShowLastScrn:false
		}
	}
	render(){
		return (
			<div className="App">
				<childComponent />
			</div>
		);
	}
}
export default ParentComponent;

import React from 'react';
import './childComponent.css'; 
class ChildComponent extends React.Component{
	constructor(props){
		super(props);
		this.state={
			unattempt:0,
		}
	}
	render(){
		return(
		<div className='wrapper'>
			<button type="button" className="btn" onClick={this.props.clickYestBtn}>Yes</button>
			<button type="button" className="btn" onClick={this.props.clickNoBtn}>No</button>
		</div>
	);
	}
}
export default ChildComponent;

我在子组件上有两个按钮。两个按钮都有单独的单击事件。如何在React js中将此功能从子组件传递到父组件。

谢谢。

Answer 1

在父级中创建孩子的引用，然后可以轻松拨打电话。

Answer 2

这应该有效。

    import React from 'react';
    import './App.css';
    import ChildComponent from './component/childComponent';
    class ParentComponent extends React.Component{
        constructor(){
            super();
            this.state = {
                isShowLastScrn:false
            }
        }
        clickYestBtn=()=>
        {
        }
clickNoBtn=()=>
        {
        }
        render(){
            return (
                <div className="App">
                    <childComponent clickYestBtn={this.clickYestBtn} clickNoBtn={this.clickNoBtn}/>
                </div>
            );
        }
    }
    export default ParentComponent;

    import React from 'react';
    import './childComponent.css'; 
    class ChildComponent extends React.Component{
        constructor(props){
            super(props);
            this.state={
                unattempt:0,
            }
        }
        render(){
            return(
            <div className='wrapper'>
                <button type="button" className="btn" onClick={this.props.clickYestBtn}>Yes</button>
                <button type="button" className="btn" onClick={this.props.clickNoBtn}>No</button>
            </div>
        );
        }
    }
    export default ChildComponent;