const [product, setProduct] = useState({
  productName: "",
  quantity: 0,
  basePrice: 0,
  sellPrice: 0,
})

const handleChange = (e) => {
  let fieldName = e.target.id;
  let fieldValue = e.target.value;
  setProduct({
    fieldName: fieldValue
  });
};

उपरोक्त कोड काम नहीं कर रहा है। जब मैं फ़ील्डनाम लॉग करता हूं, तो यह productName वापस आ जाता है।

मैंने इसके बजाय productName का स्पष्ट रूप से उपयोग करने की कोशिश की और यह काम कर रहा है

const handleChange = (e) => {
  let fieldName = e.target.id;
  let fieldValue = e.target.value;
  setProduct({
    productName: fieldValue
  });
}

क्या कोई मुझे बता सकता है कि हुड के नीचे क्या चल रहा है कि प्रारंभिक दृष्टिकोण क्यों काम नहीं कर रहा है?

पीएस कारण मैं e.target.id का उपयोग करना चाहता हूं क्योंकि ऐसे कई क्षेत्र हैं जिन्हें अद्यतन करने की आवश्यकता है धन्यवाद

2
Jonathan Chiong 10 जिंदा 2021, 07:03

2 जवाब

सबसे बढ़िया उत्तर

useState पर सेटर नहीं करता' t setState की तरह काम करता है एक प्रतिक्रिया वर्ग घटक पर विधि।

केवल एक विशेष फ़ील्ड नाम सेट करना product ऑब्जेक्ट में अन्य फ़ील्ड के मानों को ओवरराइड कर देगा और उन्हें undefined पर सेट कर देगा।

अन्य फ़ील्ड के मान प्राप्त करने के लिए आपको मौजूदा product ऑब्जेक्ट को फैलाना होगा और फिर फ़ील्ड नाम को गतिशील रूप से सेट करने के लिए [] नोटेशन का उपयोग करके फ़ील्ड के मान को ओवरराइड करना होगा।

कुछ इस तरह:

setProduct({ 
  ...product,
  [fieldName]: fieldValue 
});
4
SiddAjmera 10 जिंदा 2021, 07:06

रिएक्ट हुक क्लासिक सेटस्टेट की तुलना में अलग तरह से काम करता है।

सेटस्टेट में, भले ही आप एक गुण सेट करते हैं और कभी भी अन्य गुणों का उल्लेख नहीं करते हैं, वे गुण बने रहेंगे। जैसे नाम और ईमेल की स्थिति के लिए, यदि आप नाम के लिए सेटस्टेट करते हैं, तो ईमेल मान होगा, इसे मिटाया नहीं जाएगा।

लेकिन useState में, मान नहीं होगा। पिछले उदाहरण के समान, यदि आप नाम गुण सेट करते हैं, तो ईमेल मिटा दिया जाएगा अर्थात अपरिभाषित। तो या तो आप पुराने मूल्यों को प्राप्त करने के लिए पुरानी वस्तु को फैला सकते हैं या आप व्यक्तियों के लिए अलग-अलग राज्य बना सकते हैं (उदाहरण के लिए नाम के लिए यूज़स्टेट और ईमेल के लिए यूज़स्टेट)

import React, { useState } from "react";
import "./styles.css";

export default function App() {
  const [store, setStore] = useState({
    name: "",
    email: ""
  });

  const handleChange = (e) => {
    // console.log(e, e.target.name, e.target.value);
    setStore({...store,  [e.target.name]: e.target.value });   // Spreading
  };

  return (
    <div className="App">
      <label id="name">Name</label>
      <input
        name="name"
        type="text"
        htmlFor="name"
        value={store.name}
        onChange={handleChange}
      ></input>
      <br />
      <br />
      <label id="email">email</label>
      <input
        name="email"
        type="text"
        htmlFor="email"
        value={store.email}
        onChange={handleChange}
      ></input>
    </div>
  );
}

एक और तरीका

 const [name, setName] = useState("");
 const [email,setEmail]= useState("");

// handle the change handlers
1
tedd 10 जिंदा 2021, 07:23