Reactda useEffectda Bog'liqliklar
Endi tugma bosilganda rangni o'zgartiramiz.
Rang uchun color holatini yaratamiz,
unga boshlang'ich qiymat berib:
const [color, setColor] = useState('green');
useEffect ichidagi qator qiymatini holatimizga almashtiramiz
va uni kvadrat qavs ichidagi bog'liqliklar ro'yxatiga qo'shishni unutmaymiz.
Endi effekt color holati o'zgarganda har safar
bajariladi:
function App() {
useEffect(() => {
document.body.style.backgroundColor = color;
}, [color]);
...
}
Keling, endi komponentimizga rangni o'zgartirish tugmasini qo'shamiz:
return (
<div>
<h1>React App</h1>
<button onClick={changeColor}>change</button>
</div>
);
Bundan tashqari, rangni olovrangga o'zgartiruvchi klik ishlovchisi funksiyasini qo'shamiz:
function changeColor() {
setColor('orange');
}
Foydalanuvchi nomi bilan holat berilgan. Har safar nom o'zgarganda, holat qiymati brauzerning mahalliy saqlash joyiga yozilishini ta'minlang.
