使用按钮从另一个 class 更改某物的状态

Question

我是 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。

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

Answer 1

您可以将状态更新函数作为 prop 传递给您的组件。
您的按钮组件：

function CustomButtonComponent (props) {
  return (
    <button onClick={() => props.setCount(count => count + 1)}>
        Click me
    </button>
  )
}

export default CustomButtonComponent

在你的主要组件中

<CustomButtonComponent setCount={setCount} />

此外，由于状态更新是在 React 中安排的，因此您不应该使用

onClick={() => setCount(count + 1)}

改为使用

onClick={() => setCount(prevCount => prevCount + 1)}

Answer 2

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

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

CustomizedSteppers.js

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

  


    </Stack>

 );
}

Answer 3

尝试理解以下代码。

const Child = (props)=>{

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

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

 return (
  
  <Child handleNext={(e)=>handleNext(e)} />
 )
}

以此代码为例，尝试用您的代码实现它。

这个父函数发生了什么？

我们将 handleNext 作为 prop 传递给触发 handleNext 函数的 子组件 当按钮被点击时在父组件内部 子组件.

Answer 4

你有几个选择。

首先是 lift your state，就像@Peter 说的。也就是说，您需要将 activeStep 移动到包含该组件和您希望具有 activeStep 值的其他组件的组件，然后将该值传递给这两个组件（一种称为 prop drilling 的做法）。这可能是最简单的方法，如果这是您要为其执行此操作的唯一变量。

第二种是使用状态管理工具，就像@ahmetkilinc 说的。 The Context API is native to React, so it won't require any extra installations or tools. There are also third-party tools like Redux 试图解决这个问题（尽管我相信 Redux 仍然只是在幕后使用上下文）。如果您预计在整个申请过程中会多次出现这种情况，则此选项更好。

使用按钮从另一个 class 更改某物的状态

Change state of something from another class with a button

button

reactjs

react-hooks

react-hook-form

use-state