React ਵਿੱਚ Forms ਨੂੰ ਸਮਝਣਾ

ਯੂਜ਼ਰਸ ਵੈੱਬ ਐਪਸ ਨਾਲ forms ਰਾਹੀਂ ਇੰਟਰੈਕਟ ਕਰਦੇ ਹਨ। ਤੁਸੀਂ ਇਹਨਾਂ ਦੀ ਵਰਤੋਂ ਲੌਗਇਨ, ਸਰਚ ਅਤੇ ਕੰਟੈਕਟ ਪੇਜਾਂ ਲਈ ਕਰਦੇ ਹੋ। React state ਰਾਹੀਂ ਇਸ ਡੇਟਾ ਨੂੰ ਪ੍ਰਬੰਧਿਤ ਕਰਨਾ ਸਰਲ ਬਣਾ ਦਿੰਦਾ ਹੈ।

Controlled Components

React ਵਿੱਚ, ਤੁਸੀਂ ਅਕਸਰ controlled components ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋ। ਇਸਦਾ ਮਤਲਬ ਹੈ ਕਿ React state input value ਨੂੰ ਪ੍ਰਬੰਧਿਤ ਕਰਦੀ ਹੈ।

ਇਹ ਕਿਵੇਂ ਕੰਮ ਕਰਦਾ ਹੈ: • value prop input ਨੂੰ ਤੁਹਾਡੀ state ਨਾਲ ਜੋੜਦਾ ਹੈ। • onChange event ਜਿਵੇਂ ਹੀ ਯੂਜ਼ਰ ਟਾਈਪ ਕਰਦਾ ਹੈ, state ਨੂੰ ਅਪਡੇਟ ਕਰਦਾ ਹੈ। • React ਹੀ 'single source of truth' ਬਣਿਆ ਰਹਿੰਦਾ ਹੈ।

ਇਹ ਪ੍ਰਕਿਰਿਆ ਇਸ ਫਲੋਅ (flow) ਦੀ ਪਾਲਣਾ ਕਰਦੀ ਹੈ: User Input → onChange Event → State Update → Re-render → Updated UI

ਕਈ Fields ਨੂੰ ਪ੍ਰਬੰਧਿਤ ਕਰਨਾ

ਤੁਹਾਨੂੰ ਹਰ input ਲਈ ਵੱਖਰੀ state ਦੀ ਲੋੜ ਨਹੀਂ ਹੈ। ਤੁਸੀਂ ਸਾਰਾ ਡੇਟਾ ਸਟੋਰ ਕਰਨ ਲਈ ਇੱਕ object ਦੀ ਵਰਤੋਂ ਕਰ ਸਕਦੇ ਹੋ।

ਇਸ ਪੈਟਰਨ ਦੀ ਵਰਤੋਂ ਕਰੋ: • ਪੂਰੇ form ਲਈ ਇੱਕ ਸਿੰਗਲ state object ਦੀ ਵਰਤੋਂ ਕਰੋ। • ਆਪਣੇ inputs 'ਤੇ name attribute ਦੀ ਵਰਤੋਂ ਕਰੋ। • state ਨੂੰ ਅਪਡੇਟ ਕਰਨ ਲਈ ਇੱਕ handleChange function ਬਣਾਓ।

Syntax [e.target.name]: e.target.value ਉਸ ਖਾਸ field ਨੂੰ ਅਪਡੇਟ ਕਰਦਾ ਹੈ ਜਿਸ ਨੇ ਬਦਲਾਅ ਨੂੰ ਟ੍ਰਿਗਰ ਕੀਤਾ ਹੈ। ਇਹ ਤੁਹਾਡੇ ਕੋਡ ਨੂੰ ਸਾਫ਼ ਰੱਖਦਾ ਹੈ।

Submissions ਨੂੰ ਸੰਭਾਲਣਾ

ਜਦੋਂ ਕੋਈ ਯੂਜ਼ਰ form submit ਕਰਦਾ ਹੈ, ਤਾਂ ਬ੍ਰਾਊਜ਼ਰ ਡਿਫੌਲਟ ਰੂਪ ਵਿੱਚ ਪੇਜ ਨੂੰ ਰਿਫ੍ਰੈਸ਼ ਕਰ ਦਿੰਦਾ ਹੈ। ਇਹ ਤੁਹਾਡੀ ਐਪ ਨੂੰ ਖਰਾਬ ਕਰ ਸਕਦਾ ਹੈ।

ਆਪਣੇ onSubmit function ਦੇ ਅੰਦਰ e.preventDefault() ਦੀ ਵਰਤੋਂ ਕਰੋ। ਇਹ ਰੀਲੋਡ ਨੂੰ ਰੋਕਦਾ ਹੈ ਅਤੇ React ਨੂੰ ਡੇਟਾ ਸੰਭਾਲਣ ਦੀ ਇਜਾਜ਼ਤ ਦਿੰਦਾ ਹੈ।

ਖਾਸ Input Types

ਵੱਖ-ਵੱਖ inputs ਲਈ ਵੱਖ-ਵੱਖ properties ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ: • Text inputs e.target.value ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹਨ। • Checkboxes e.target.checked ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹਨ। • Select menus ਚੁਣੇ ਹੋਏ ਆਪਸ਼ਨ ਨੂੰ ਟ੍ਰੈਕ ਕਰਨ ਲਈ value prop ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹਨ।

Validation Tips

ਡੇਟਾ ਸਬਮਿਟ ਕਰਨ ਤੋਂ ਪਹਿਲਾਂ ਹਮੇਸ਼ਾ ਵੈਲੀਡੇਟ ਕਰੋ। ਇਹ ਚੈੱਕ ਕਰੋ: • ਲੋੜੀਂਦੇ (Required) fields. • ਸਹੀ email formats. • ਪਾਸਵਰਡ ਦੀ ਘੱਟੋ-ਘੱਟ ਲੰਬਾਈ।

React Forms ਲਈ ਵਧੀਆ ਤਰੀਕੇ (Best Practices)

ਇਹਨਾਂ ਕਦਮਾਂ ਵਿੱਚ ਮਾਹਰ ਹੋਣਾ ਤੁਹਾਨੂੰ ਪੇਸ਼ੇਵਰ ਵੈੱਬ ਐਪਲੀਕੇਸ਼ਨਾਂ ਬਣਾਉਣ ਵਿੱਚ ਮਦਦ ਕਰਦਾ ਹੈ।

Source: https://dev.to/aj_arul/understanding-forms-in-react-19gj