बटन दबाने पर React में फॉर्म डेटा प्रोसेसिंग

पिछले पाठ में हमने ऐसा किया था कि इनपुट में एक कैरेक्टर दर्ज करने पर पैराग्राफ में तुरंत परिणाम दिखाई दे। यह निस्संदेह अच्छा लगता है, लेकिन इसमें एक कमी है।

कल्पना कीजिए कि हमें एक "भारी", resource-intensive ऑपरेशन करना है। हर कैरेक्टर इनपुट पर इसे करना बहुत optimal नहीं है - डेटा इनपुट पूरा होने का इंतजार करना बेहतर है और फिर एक बार आवश्यक ऑपरेशन perform करना है और परिणाम को पैराग्राफ में दिखाना है।

इसके लिए हमें एक बटन introduce करने की आवश्यकता है, जिसके दबाने पर हमारा resource-intensive ऑपरेशन perform होगा। इस स्थिति में, फिर से प्रत्येक इनपुट का अपना state होगा, प्लस ऑपरेशन के परिणाम को रिकॉर्ड करने और उसे स्क्रीन पर दिखाने के लिए हमें एक और state की आवश्यकता है।

आइए एक उदाहरण देखें। मान लीजिए कि हमारे पास दो इनपुट और एक बटन है। बटन दबाने पर आइए इनपुट में दर्ज किए गए नंबरों का योग find करें।

आइए implement करें:

jsxfunction App() {
  const [value1, setValue1] = useState(0);
  const [value2, setValue2] = useState(0);
  const [result, setResult] = useState(0);
  
  function handleChange1(event) {
    setValue1(event.target.value);
  }
  
  function handleChange2(event) {
    setValue2(event.target.value);
  }
  
  function handleClick() {
    setResult(Number(value1) + Number(value2));
  }
  
  return <div>
    <input value={value1} onChange={handleChange1} />
    <input value={value2} onChange={handleChange2} />
    
    <button onClick={handleClick}>btn</button>
    <p>result: {result}</p>
  </div>;
}

छोटे वर्जन का उपयोग किया जा सकता है:

jsxfunction App() {
  const [value1, setValue1] = useState(0);
  const [value2, setValue2] = useState(0);
  const [result, setResult] = useState(0);
  
  return <div>
    <input value={value1} onChange={event => setValue1(event.target.value)} />
    <input value={value2} onChange={event => setValue2(event.target.value)} />
    
    <button onClick={() => setResult(Number(value1) + Number(value2))}>btn</button>
    <p>result: {result}</p>
  </div>;
}