使用按钮更改另一个类的某些内容的状态

我是 React 新手，很难理解状态的概念。

下面我从 MUI 导出一个步进器。我使用状态

export default function CustomizedSteppers() {
  const steps = ['Zoninfo', 'Betalsätt', 'Börja ladda'];
 const [activeStep, setActiveStep] = React.useState(0);
  const handleNext = () => {
      setActiveStep((activeStep+1));
    };

 

 return (
  //...
  //Stepper stuff...
  //...

  <Button variant="contained" onClick={handleNext}>Hello 
  World</Button>

  
</Stack>

 );
}

我现在想拆分此代码，以便可以从另一个组件设置 ActiveStep。

意思是，我想将按钮放在该组件之外，并将其放在另一个类中，但仍然允许该按钮更改 activeStep 的值 - 通过在单击该类之外的按钮时访问方法 handleNext 。我该如何做到这一点？

您需要创建一个父组件，定义activeStep and handleNext在那里，并将它们传递给你的CustomizedSteppers

父.js

import CustomizedSteppers from "./CustomizedSteppers"
export default function Parent() {
  const steps = ['Zoninfo', 'Betalsätt', 'Börja ladda'];
 const [activeStep, setActiveStep] = React.useState(0);
  const handleNext = () => {
      setActiveStep((activeStep+1));
    };

return (
    <>
      <CustomizedSteppers activeStep={activeStep} handleNext={handleNext}>
      <Button variant="contained" onClick={handleNext}>Hello 
      World</Button>
    </>
  )
}

定制Steppers.js

export default function CustomizedSteppers({activeStep, handleNext}) {
    return (
    //...
    //Stepper stuff...
    //...

  


    </Stack>

 );
}