Boshqaruvchi props’lar (Control props)

React’da Control Props pattern’i — bu state’ni boshqarishning strategik yondashuvi bo’lib, boshqariladigan komponentlar konsepsiyasini kengaytiradi. Bu pattern komponent ichida qanday qilib state boshqarilishi haqida moslashuvchan mexanizm taqdim etadi. Buni yaxshiroq tushunish uchun avval boshqariladigan komponentlar haqida tushuncha hosil qilishimiz kerak.

Boshqariladigan komponentlar (Controlled components)

Boshqariladigan komponentlar o’z ichki state’ini saqlab turmaydigan komponentlardir. Buning o’rniga, ular o’zining joriy qiymatini ota komponentdan prop sifatida oladi, va bu state uchun yagona ishonch manbai hisoblanadi. State o’zgarishi kerak bo’lganda, boshqariladigan komponentlar ota komponentga odatda onChange kabi callback funksiyalar orqali xabar beradi. Shunday qilib, ota komponent state’ini boshqarish va boshqariladigan komponentning qiymatini yangilash uchun javobgar hisoblanadi.

Masalan, boshqariladigan <input> elementi quyidagicha bo’ladi:

function Form() {
    const [inputValue, setInputValue] = React.useState("");
 
    function handleChange(event) {
        setInputValue(event.target.value);
    }
 
    return <input type="text" value={inputValue} onChange={handleChange} />;
}

Control Props pattern’i boshqariladigan komponentlar tamoyilini yanada rivojlantiradi, bu orqali komponentga tashqaridan prop’lar orqali boshqarilish yoki o’zini state’ini ichki tomondan mustaqil ravishda boshqarish imkoniyati beriladi, ya’ni tashqi boshqaruvni ixtiyoriy qiladi. Ushbu pattern’ga amal qiluvchi komponent state qiymatini va uni yangilash uchun funksiyani prop sifatida qabul qiladi. Bu ikki tomonlama imkoniyat ota komponentga bolaning holatini nazorat qilish imkonini beradi, lekin nazorat qilinmasa, bola komponent mustaqil ravishda ishlay oladi.

Toggle komponenti misoli

Control Props pattern’ga misol sifatida boshqarilishi mumkin bo’lgan yoki o’z holatini mustaqil boshqaruvchi almashtirish tugmasi(button)ni keltirish mumkin:

function Toggle({ on, onToggle }) {
    const [isOn, setIsOn] = React.useState(false);
 
    const handleToggle = () => {
        const nextState = on === undefined ? !isOn : on;
        if (on === undefined) {
            setIsOn(nextState);
        }
        if (onToggle) {
            onToggle(nextState);
        }
    };
 
    return (
        <button onClick={handleToggle}>
            {on !== undefined ? on : isOn ? "Yoqilgan" : "O'chirilgan"}
        </button>
    );
}

Toggle komponentida isOn ichki state’ni ifodalaydi, on esa tashqi boshqaruv prop hisoblanadi. Agar ota komponent on prop’ni taqdim etsa, komponent boshqariladigan rejimda ishlaydi. Agar unday bo’lmasa, u o’z ichki state’iga, ya’ni isOnga asoslanadi. onToggle esa ota komponentga state o’zgarishiga javob qaytarish imkonini beruvchi callback funksiya bo’lib, bu orqali ota komponent o’z state’ini Toggle komponenti state’i bilan sinxronlashtirish imkoniyatiga ega bo’ladi.

Ushbu pattern komponentni moslashuvchanligini oshiradi, boshqariladigan va boshqarilmaydigan rejimlarda ishlash imkoniyatini taqdim etadi. Bu, kerak bo’lganda, ota komponentni boshqarish imkoniyatiga ega qiladi, shu bilan birga, komponentni aniq boshqarilmasa ham o’z state’ini mustaqil boshqarish imkonini beradi.