𝗥𝗲𝗮𝗰𝘁-𝗶𝗹 𝗙𝗼𝗿𝗺𝘀-𝗸𝗮𝗹𝗮𝗶𝗽 𝗣𝘂𝗿𝗶𝗻𝗱𝗵𝘂𝗸𝗼𝗹𝗹𝘂𝘁𝗵𝗮𝗹

பயனர்கள் web apps-களுடன் forms மூலம் தொடர்பு கொள்கிறார்கள். லாகின் (logins), தேடல்கள் (searches) மற்றும் தொடர்புப் பக்கங்களுக்கு (contact pages) நீங்கள் இவற்றைத் பயன்படுத்துகிறீர்கள். React, state மூலம் இந்தத் தரவை நிர்வகிப்பதை எளிதாக்குகிறது.

Controlled Components

React-இல், நீங்கள் பெரும்பாலும் controlled components-களைப் பயன்படுத்துவீர்கள். இதன் பொருள் React state, input மதிப்பை நிர்வகிக்கிறது என்பதாகும்.

இது எவ்வாறு செயல்படுகிறது: • value prop, input-ஐ உங்கள் state-உடன் இணைக்கிறது. • பயனர் தட்டச்சு செய்யும்போது onChange event, state-ஐப் புதுப்பிக்கிறது. • React மட்டுமே உண்மையான ஆதாரமாக (single source of truth) இருக்கும்.

இந்தச் செயல்முறை இந்த வரிசையைப் பின்பற்றுகிறது: User Input → onChange Event → State Update → Re-render → Updated UI

பல புலங்களை (Multiple Fields) நிர்வகித்தல்

ஒவ்வொரு input-க்கும் தனித்தனி state தேவையில்லை. அனைத்துத் தரவையும் சேமிக்க நீங்கள் ஒரு object-ஐப் பயன்படுத்தலாம்.

இந்த முறையைப் பயன்படுத்தவும்: • முழு form-க்கும் ஒரு ஒரே ஒரு state object-ஐப் பயன்படுத்தவும். • உங்கள் inputs-களில் name attribute-ஐப் பயன்படுத்தவும். • state-ஐப் புதுப்பிக்க ஒரு handleChange function-ஐ உருவாக்கவும்.

[e.target.name]: e.target.value என்ற syntax, மாற்றத்தைத் தூண்டிய குறிப்பிட்ட புலத்தை (field) புதுப்பிக்கிறது. இது உங்கள் code-ஐத் தூய்மையாக வைத்திருக்க உதவுகிறது.

Submissions-களைக் கையாளுதல்

ஒரு பயனர் form-ஐ submit செய்யும்போது, உலாவியானது (browser) இயல்பாகவே பக்கத்தைப் புதுப்பிக்கும் (refresh). இது உங்கள் app-ஐப் பாதிக்கும்.

உங்கள் onSubmit function-க்குள் e.preventDefault()-ஐப் பயன்படுத்தவும். இது பக்கத்தைப் புதுப்பிப்பதைத் தடுத்து, தரவை React கையாள அனுமதிக்கிறது.

சிறப்பு Input வகைகள்

வெவ்வேறு inputs-களுக்கு வெவ்வேறு properties தேவைப்படுகின்றன: • Text inputs-களுக்கு e.target.value பயன்படுத்தப்படுகிறது. • Checkboxes-களுக்கு e.target.checked பயன்படுத்தப்படுகிறது. • Select menus, தேர்ந்தெடுக்கப்பட்ட விருப்பத்தைக் கண்காணிக்க value prop-ஐப் பயன்படுத்துகின்றன.

Validation குறிப்புகள்

தரவை submit செய்வதற்கு முன் எப்போதும் அதைச் சரிபார்க்கவும் (validate). இவற்றைச் சரிபார்க்கவும்: • Required fields (கட்டாயத் தேவைகளாக உள்ள புலங்கள்). • சரியான மின்னஞ்சல் வடிவங்கள் (Correct email formats). • குறைந்தபட்ச கடவுச்சொல் நீளம் (Minimum password lengths).

React Forms-களுக்கான சிறந்த நடைமுறைகள் (Best Practices)

இந்தப் படிகளைக் கற்றுக்கொள்வது தொழில்முறை இணையப் பயன்பாடுகளை (professional web applications) உருவாக்க உங்களுக்கு உதவும்.

ஆதாரம்: https://dev.to/aj_arul/understanding-forms-in-react-19gj