Reactjs 反应-如何将自定义函数从子组件发送到父组件

我正在创建自定义步骤向导，请查找以下实现：

export const Wizard: React.FC<Props> = props => {
const {
    steps,
    startAtStep = 0,
    showStepsNavigation = true,
    prevButtonText = 'Back',
    nextButtonText = 'Next',
    onStepChange,
    nextButtonTextOnFinalStep,
    onNextClicked,
    onPreviousClicked
} = props;
const [currentStep, setCurrentStep] = useState(startAtStep);

let CurrentStepComponent = steps[currentStep].Component;

const nextStep = () => {
    setCurrentStep(currentStep + 1);
};

const previousStep = () => {
    setCurrentStep(currentStep - 1);
};

const goToStep = (stepId: number) => {
    const stepIndex = steps.findIndex(step => step.id == stepId);
    if (stepIndex != -1) {
        setCurrentStep(stepIndex);
    }
};

const handlePreviousClick = () => {
    if (onPreviousClicked && typeof onPreviousClicked == 'function') {
        onPreviousClicked();
    }

    previousStep();
};

const handleNextClick = () => {
    if (onNextClicked && typeof onNextClicked == 'function') {
        onNextClicked();
    }

    nextStep();
};

return (
    <article>
        <section>
            <CurrentStepComponent {...props} goToStep={goToStep} nextStep={nextStep} previousStep={previousStep} />
        </section>
        <footer>
            <div className="wizard-buttons-container back-buttons">
                <Button
                    className="wizard-button wizard-button--back"
                    secondary
                    onClick={handlePreviousClick}
                    disabled={steps[currentStep - 1] == null}
                >
                    <i className="fas fa-chevron-left"></i>
                    {prevButtonText}
                </Button>
            </div>

            <div className="wizard-buttons-container next-buttons">
                <Button
                    className="wizard-button wizard-button--next"
                    onClick={handleNextClick}
                    disabled={steps[currentStep + 1] == null}
                >
                    {steps[currentStep + 1] == null && nextButtonTextOnFinalStep ? nextButtonTextOnFinalStep : nextButtonText}
                    <i className="fas fa-chevron-right"></i>
                </Button>
            </div>
        </footer>
    </article>
);

})

我使用它的方式如下：

    const steps = [
    {
        id: 1,
        label: 'Directors and Owners',
        Component: DirectorsAndOwnersStep
    },
    {
        id: 2,
        label: 'Bank Account',
        Component: BankAccountStep
    },
    {
        id: 3,
        label: 'Company Documents',
        Component: CompanyDocumentsStep
    },
    {
        id: 4,
        label: 'Review and Submit',
        Component: ReviewAndSubmitStep
    }
];

type Props = RouteComponentProps<MatchParams>;

export const EnterpriseOnboardingPage: React.FC<Props> = () => {

    const onNext = () => {
        console.log('Next Clicked');
    };

    const onPrevious = () => {
        console.log('Previous Clicked');
    };

    return (
        <section>
            <Wizard
                steps={steps}
                nextButtonTextOnFinalStep="Submit"
                onNextClicked={onNext}
                onPreviousClicked={onPrevious}
            />
        </section>
    );
};

现在是我的问题，在子组件中，我想处理当用户单击Next时应该发生的事情，比如onNextClick在子组件中执行此自定义函数，而不是执行向导组件中实现的默认行为

我已经尝试在向导中设置状态nextClbRegistered，并通过将setNextClbRegistered发送给子级来传递自定义函数并执行它，然后在向导中的HandlenExt中单击是否定义了函数来执行它。但它总是未定义的

有什么好办法吗

---

提前谢谢

React是关于组件树中向下流动的数据。如果您希望您的孩子能够显示和/或修改孩子和家长之间的共享状态，您应该通过道具将其传递给孩子

基于类的组件

class Parent extends React.Component{
    state = { title: '' }

    setTitle = title => this.setState({ title })

    render(){
        const { title } = this.state
        return <Child title={title} setTitle={this.setTitle} />
    }
}


class Child extends React.Component{
    render(){
        const { title, setTitle } = this.props
        return <input value={value} setTitle={e => setTitle(e.target.value)} />
    }
}

---

React是关于组件树中向下流动的数据。如果您希望您的孩子能够显示和/或修改孩子和家长之间的共享状态，您应该通过道具将其传递给孩子

基于类的组件

class Parent extends React.Component{
    state = { title: '' }

    setTitle = title => this.setState({ title })

    render(){
        const { title } = this.state
        return <Child title={title} setTitle={this.setTitle} />
    }
}


class Child extends React.Component{
    render(){
        const { title, setTitle } = this.props
        return <input value={value} setTitle={e => setTitle(e.target.value)} />
    }
}

---

谢谢你，现在我明白了！谢谢你，现在我明白了！