Reactда useEffectдаги богликликлар
Энди тугмани босганда рангни ўзгартирамиз.
Ранг учун color стейтини яратиб,
унга бошлангич қийматни берамиз:
const [color, setColor] = useState('green');
useEffect ичидаги сатр қийматини
бизнинг стейт билан алмаштирамиз ва
ун kvadrat қавс ичидаги богликликлар
руйхатига уни қўшиб қўйишни унутмаймиз.
Энди эффект color стейти ўзгарганида
хар доим бажарилади:
function App() {
useEffect(() => {
document.body.style.backgroundColor = color;
}, [color]);
...
}
Энди компонентимизга рангни ўзгартириш учун тугма қўшамиз:
return (
<div>
<h1>React App</h1>
<button onClick={changeColor}>change</button>
</div>
);
Бизга рангни оранж рангга ўзгартирадиган клик ишловчиси функциясини ҳам қўшимиз керак:
function changeColor() {
setColor('orange');
}
Фойдаланувчи исми билан стейт берилган. Исм ўзгарганда, стейт қиймати браузернинг локал сақловига ёзилиши учун қилинг.