मैं टेक्स्टबॉक्स द्वारा ईवेंट हैंडलर को पास किए गए ऑनचेंज इवेंट के आधार पर प्रारंभिक स्थिति अपडेट कर रहा हूं, जैसा कि नीचे दिया गया है -

import React,{useState} from 'react'

function ViewAll() {
    const iCandidateState={
        Name:'',
        Age:'',
        Qalification:''
    };
    function nameHandler(event){
        alert(event.target.value);
        this.iCandidateState.Name=event.target.value;
    }
    return (
        <div>
            <table>
              <tr>
                  <td>
                      Name
                  </td>
                  <td>
                      <input type="text" name="txtName" value={iCandidateState.Name} onChange={(e)=>nameHandler(e)}></input> 
                  </td>
              </tr>
              <tr>
                  <td>
                      Age
                  </td>
                  <td>
                      <input type="text" name="txtAge"></input> 
                  </td>
              </tr>
              <tr>
                  <td>
                      Qalification
                  </td>
                  <td>
                      <input type="text" name="txtQualification"></input> 
                  </td>
              </tr>
              <tr>
                  <td colSpan="2" align="center">
                     <button name="btnSubmitForm">Post</button>
                  </td>
              </tr>
            </table>
        </div>
    )
}

export default ViewAll

जब मैं txtName में कुछ टाइप करता हूं, तो मैं राज्य - iCandidateState को टेक्स्टबॉक्स के भीतर नाम फ़ील्ड के साथ अपडेट करने की अपेक्षा करता हूं। लेकिन मुझे एक त्रुटि मिल रही है - TypeError: Cannot read property 'iCandidateState' of undefined

मैंने इसे सेटस्टेट के साथ भी आजमाया -

 this.setState({
                ...iCandidateState,
                Name:event.target.value
            })

टेक्स्टबॉक्स में कुछ टाइप करने के बाद मुझे त्रुटि मिलती है -

TypeError: Cannot read property 'setState' of undefined

मैं राज्य को कैसे अपडेट कर सकता हूं?

-1
C Sharper 17 मई 2021, 04:21

2 जवाब

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

आपने वर्ग घटकों और कार्यात्मक घटकों के विचार को मिश्रित किया है। this सिंटैक्स वर्ग घटकों के लिए है, अर्थात।

class ViewAll extends Component {

  render() {
    return (/* some components */);
  }
}

आप एक कार्यात्मक घटक बनाने की कोशिश कर रहे हैं (कीवर्ड function द्वारा चिह्नित)। तो आपको इसके बजाय हुक का उपयोग करना चाहिए। यह कुछ ऐसा होना चाहिए

import { useState } from 'react'

function ViewAll() {
  const [iCandidateState, setICandidateState] = useState({
    Name: '',
    Age: '',
    Qalification: ''
  });

  function nameHandler(event) {
    alert(event.target.value);
    setCandState({ ...iCandidateState, Name: event.target.value })
  }

  return (/* some components */);
}

export default ViewAll
1
Matthew Kwong 17 मई 2021, 05:56

फ़ंक्शन घटक में, आप इसका उपयोग नहीं कर सकते। इसके बजाय, आप इस समस्या को संभालने के लिए useState हुक का उपयोग कर सकते हैं। कृपया अपने कोड के संबंधित भाग को इसके साथ बदलें

const [iCandidateState, setCandState] = useState({
    Name: '',
    Age: '',
    Qalification: ''
});

function nameHandler(event) {
    alert(event.target.value);
    setCandState({
        ...iCandidateState,
        Name: event.target.value,
    })
}
3
TopW3 17 मई 2021, 04:32