Assalom alaykum!
React da ko'pincha ushbu holatdagi event handler larni ishlatilishini guvohi bo'lamiz ya'ni odatda implicit
bo'lgan dastlabki event argumentimizga qo'shimcha tarzda 2 - argumentni ham funksiyamizga yuborishga to'g'ri keladi:
const handleChange = (e: Event, type: string) => {
// input event va type bilan bog'liq kodimiz
}
return (
<>
<!-- ... -->
<input onChange={(e) => handleChange(e, 'line')} />
<!-- ... -->
<input onChange={(e) => handleChange(e, 'point')} />
<!-- ... -->
<input onChange={(e) => handleChange(e, 'polygon')} />
<!-- ... -->
</>
)
Ushbu kod albatta xatosiz ishlaydi lekin bu yerda muammo onChange
event handler funksiyamizni yoyishga to'g'ri keladi ya'ni:
onChange={handleChange} => onChange={(e, arg1) => handleChange(e)}
Bundan tashqari kodimiz unchalik ham clean
emas. Balki bu usulni bitta joyda ishlatsak uncha bilinmas lekin bu kodimiz bir nechta joyida qayta-qayta ishlatilsa ayniqsa refactor qilishda muammo yaqqol ko'rinadi.
Sodda yechim: curried
funksiya bilan kodimizni quyidagi elegant & clean ko'rinishga olib kelishimiz mumkin:
const handleChange = (type: string) => (e: Event) => {
// input event va type bilan bog'liq kodimiz
}
return (
<>
<!-- ... -->
<input onChange={handleChange('point')} />
<!-- ... -->
<input onChange={handleChange('line')} />
<!-- ... -->
<input onChange={handleChange('polygon')} />
<!-- ... -->
</>
)
Ya'ni funksiya qaytaradigan funksiyani event handler sifatida ishlatamiz.
Curried funksiyalar haqida ushbu linkdan batafsil ma'lumot olishingiz mumkin: https://javascript.info/currying-partials
Top comments (0)