我是 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 。我該如何做到這一點？
uj5u.com熱心網友回復：
您需要創建一個父組件，在那里定義activeStep，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>
);
}
uj5u.com熱心網友回復：
你有幾個選擇。
首先是提升你的狀態，就像@Peter 說的那樣。也就是說，您需要將 activeStep 移動到包含該組件和您希望擁有 activeStep 值的其他組件的組件，然后將該值傳遞給兩者（一種稱為 prop 鉆孔的做法）。這可能是最簡單的方法，如果這是您想要這樣做的唯一變數。
第二個是使用狀態管理工具，就像@ahmetkilinc 說的那樣。Context API是 React 原生的，所以它不需要任何額外的安裝或工具。還有像Redux這樣的第三方工具試圖解決這個問題（盡管我相信 Redux 仍然只是在幕后使用背景關系）。如果這是您預期在整個應用程式中多次出現的需求，則此選項會更好。
uj5u.com熱心網友回復：
您可以將狀態更新函式作為道具傳遞給您的組件。
您的按鈕組件：
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)}
uj5u.com熱心網友回復：
嘗試理解以下代碼。
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傳遞給Child 組件，當在Child 組件內單擊按鈕時，該組件會觸發 Parent 組件內的 handleNext 函式。
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/457387.html
下一篇：將影像放置在按鈕中但不顯示影像