मैं एक नौसिखिया हूँ। मैं प्रतिक्रिया के साथ एक वेब एप्लिकेशन बना रहा हूं। मेरे पास 18 फ़ील्ड वाला एक फॉर्म है।

मेरे पास वर्तमान में प्रारंभिक मूल्य के साथ उपयोगस्टेट है

 const clientObj = { //18 fields };
 const [client, setClient] = useState(clientObj);

प्रत्येक इनपुट के लिए, मेरे पास ऐसा कुछ है (उदाहरण फ़ील्ड नाम के साथ):

<Form.Group>
    <Form.Control 
      onChange={ e => { setClient( prev => ({...prev, name:e.target.value}))}}
      placeholder="Your name"
      type="text"
      required/>                                                
</Form.Group>

यह काम करता है, हालांकि मुझे संदेह है कि यह कुशल है। मैं चाहता हूं कि मेरा वेब एप्लिकेशन कुशलता से काम करे। मुझे इतने सारे फ़ील्ड वाले फॉर्म को कैसे संभालना चाहिए? धन्यवाद :)

0
Victor Morales 13 जुलाई 2021, 02:28

3 जवाब

आम तौर पर फॉर्म इनपुट और नेस्टेड स्थिति के साथ काम करते समय आप प्रत्येक इनपुट के लिए name विशेषता निर्दिष्ट करते हैं और एक onChange हैंडलर का उपयोग करते हैं। चूंकि आप स्थानीय घटक स्थिति और एक onChange हैंडलर का भी उपयोग कर रहे हैं, तो आप यह भी सुनिश्चित करना चाहेंगे कि आपके इनपुट पूरी तरह से नियंत्रित हैं। कोड>मूल्य इनपुट पर सहारा।

const clientObj = { //18 fields };
const [client, setClient] = useState(clientObj);

const onChange = event => {
  const { name, value } = event.target;
  setClient(prevState => ({
    ...prevState,  // shallow copy all previous state
    [name]: value, // update specific key/value
  }));
};

...

<Form.Control
  name="name"
  value={client.name}
  onChange={onChange}
  placeholder="Your name"
  type="text"
  required
/>
<Form.Control
  name="lastName"
  value={client.lastName}
  onChange={onChange}
  placeholder="Your last name"
  type="text"
  required
/>
<Form.Control
  name="age"
  value={client.age}
  onChange={onChange}
  placeholder="Your age"
  type="text"
  required
/>
...etc...
3
Drew Reese 13 जुलाई 2021, 00:02

चूंकि आप यूज़स्टेट हुक का उपयोग कर रहे हैं। मैं आपको useReducer हुक का उपयोग करने की सलाह दूंगा। useReducer उसी तरह काम करता है जैसे redux कैसे काम करता है, और यह मेरी राय में क्लीनर दिखता है। हालांकि प्रदर्शन के लिहाज से आपके उदाहरण में बहुत कुछ गलत नहीं है।

1
momomo 12 जुलाई 2021, 23:42

साफ - सफाई:

    const handleChange = (e) => setClient({ ...client, [e.target.name] : e.target.value})
    
    return ( 
      <input
       name="lastName"
       onChange{handleChange}
      />
    );

आपके उपयोग के मामले के आधार पर आपको राज्य को बनाए रखने की भी आवश्यकता नहीं हो सकती है, बस अपने क्लाइंट ऑब्जेक्ट को फॉर्म में और अपने प्रोप को उचित इनपुट में फैलाएं।

वैकल्पिक रूप से useReducer भी एक विकल्प है

1
svey 12 जुलाई 2021, 23:51