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

Question

我正在创建一个自定义步骤向导，请在下面找到实现：

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>
);
};

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

我尝试在向导中设置State，"nextClbRegistered"，并通过向子级发送"setNextClbRegistered"来传递自定义函数并执行它，然后在向导中的"handleNextClick"中，如果定义了函数，则执行它。但它总是未定义的。

有什么想法最好的方法吗？

提前感谢！

Answer 1

React是关于组件树中向下流动的数据。如果你想让你的Child能够显示和/或修改Child和Parent之间的共享状态，你应该提升你的状态，并通过props将其传递给它的children

const Parent = () =>{
const [title, settitle] = useState('foo')
return <Child title={title} setTitle={setTitle} />
}

const Child = ({ title, setTitle}) =>{
return <input value={title} onChange={e => setTitle(e.target.value)} />
}

类内组件

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