Изменить состояние чего-либо из другого класса с помощью кнопки
Я новичок в 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 при нажатии кнопки вне этого класса. Как мне это удается?
Ответы 4
Вы можете просто передать функцию обновления состояния в качестве реквизита для вашего компонента. Компонент вашей кнопки:
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)}
Да, это действительно работает нормально. Однако я понял, что мне нужно уточнить более подробную информацию о проблеме, так как это не работает в моей ситуации. Я изменил содержание вопроса сейчас
Вам нужно сделать родительский компонент, определить там 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>
);
}
проблема будет в том, что кнопка будет появляться дважды на странице. Я хочу, чтобы кнопка была вне всего, но при этом могла изменять активный шаг в настраиваемых степперах.
Вы можете удалить кнопку в CustomizedSteppers. Я забыл удалить его. Обновил ответ.
Спасибо! один вопрос, можно ли вынести кнопку в отдельный класс, чтобы она не была с кастомизированными степперами? Хочу поставить кнопку в форме1 - при этом степпер будет самостоятельным и презентабельным на всех страницах. Все формы должны содержать кнопки, которые могут управлять активным шагом, не относясь к тому же классу, что и степпер.
Да, вы можете создать компонент Button и передать handleNext в качестве реквизита.
Попробуйте понять следующий код.
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 внутри родительского компонента, когда кнопка является щелкнул внутри Дочерний компонент.
Большой! Можно ли переместить этот дочерний компонент в другой класс и сохранить ту же функциональность?
У вас есть пара вариантов.
Первый - поднимите свое состояние, как сказал @Peter. То есть вам нужно будет переместить activeStep в компонент, который содержит и этот компонент, и другой компонент, для которого вы хотите иметь значение activeStep, а затем передать это значение обоим (практика, известная как просверливание). Это, вероятно, самый простой способ, если это единственная переменная, для которой вы хотите это сделать.
Во-вторых, использовать инструменты управления состоянием, как сказал @ahmetkilinc. Контекстный API встроен в React, поэтому для него не потребуется никаких дополнительных установок или инструментов. Существуют также сторонние инструменты, такие как Редукс, которые пытаются решить эту проблему (хотя я считаю, что Redux все равно просто использует контексты за кулисами). Этот вариант лучше, если вы ожидаете, что это потребуется несколько раз в вашем приложении.
Еще один хороший сторонний инструмент — Zustand, github.com/pmndrs/zustand.
вы можете добиться этого с помощью инструментов управления состоянием, таких как contextApi или Redux.