मैं प्रतिक्रिया के साथ Django का उपयोग कर रहा हूँ और मैं उपयोगकर्ता प्रोफाइल को अद्यतन करने की कोशिश कर रहा हूँ, नीचे मैंने कोशिश की है:

constructor(props){
    super(props);

    this.state = {
        username: '',
        fetched_data: {}
    }

async componentDidMount() {
  const token = localStorage.getItem('token');
  const config = {
    headers: {
      "Content-Type": "application/json"
    }
  };
  config.headers["Authorization"] = `Token ${token}`;

  await axios.get(API_URL + 'users/api/user/', config)
    .then(res => {
        this.setState({fetched_data: res.data})
    })
}

onInputChange_username(event){
    this.setState({username: event.target.value});
}

<form onSubmit={this.onFormSubmit} >

    <div>
        <label>Username:</label>
        <input
            placeholder="Username"
            className="form-control"
            value={this.state.username ? this.state.username : this.state.fetched_data.username}
            onChange={this.onInputChange_username}
        />
   </div>
</form>

मैंने पहली बार उपयोगकर्ता डेटा को कॉम्पोनेंटडिडमाउंट () में लाने की कोशिश की और मैंने इसे this.state.fetched_data में संग्रहीत किया। फ़ॉर्म में मैंने यह मान सेट करने का प्रयास किया है। यदि यह मौजूद है। यदि यह खाली स्ट्रिंग है तो मैं इसे this.state.fetched_data.username पर सेट करता हूं।

उपरोक्त कोड के साथ मेरी समस्या यह है कि जब मैंने उपयोगकर्ता नाम में फ़ील्ड बदलने की कोशिश की, तो मैं इनपुट फ़ील्ड में मान को पूरी तरह से मिटाने में सक्षम नहीं था। हर बार जब फ़ील्ड खाली होती है, तो यह this.state.fetched_data.username में मान पर रीसेट हो जाती है। मैंने इस तरह defaultValue का उपयोग करने का भी प्रयास किया:

<div>
    <label>Username:</label>
    <input
        placeholder="Username"
        className="form-control"
        defaultValue = {this.state.fetched_data.username}
        value={this.state.username}
        onChange={this.onInputChange_username}
    />

लेकिन यह भी काम नहीं करता है क्योंकि यह केवल दर्ज किए गए इनपुट में प्लेसहोल्डर को दिखाता है। मैं यह काम कैसे पूरा कर सकता हूं? अग्रिम में धन्यवाद।

0
Stephan 20 फरवरी 2019, 08:20

1 उत्तर

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

समस्या रेंडर फ़ंक्शन में इनपुट फ़ील्ड के मान का आपका सशर्त असाइनमेंट है। जब आप फ़ील्ड के मान को साफ़ करने का प्रयास करते हैं तो यह केवल this.state.fetched_data.username पर रीसेट हो जाता है ताकि आप इसे कभी भी साफ़ न कर सकें।

प्रपत्र लोड करते समय प्रारंभिक स्थिति सेट करें:

componentDidMount() {
    this.setState({
        username: this.state.fetched_data.username,
    });
}

फिर इनपुट फ़ील्ड का मान render में सेट करें:

<input 
    value={this.state.username}
    onChange={this.onInputChange_username}
/>

और आपका ऑन चेंज हैंडलर ठीक है जैसा कि यह है:

onInputChange_username(event){
    this.setState({username: event.target.value});
}
1
Matt 20 फरवरी 2019, 05:31