Reactjs setState () एक डायनामिक कुंजी नाम के साथ?

Question

EDIT: यह एक डुप्लिकेट है, यहां देखें

राज्य सेट करते समय मुझे डायनामिक की नाम का उपयोग करने का कोई उदाहरण नहीं मिल सकता है। यही है जो मैं करना चाहता हूं:

inputChangeHandler : function (event) {
    this.setState( { event.target.id  : event.target.value } );
},

जहां event.target.id को अपडेट की जाने वाली राज्य कुंजी के रूप में उपयोग किया जाता है। क्या यह रिएक्ट में संभव नहीं है?

Comments

यह डायनामिक ऑब्जेक्ट कुंजियों से संबंधित किसी भी प्रश्न का एक डुप्लिकेट है। यह प्रतिक्रिया करने के लिए विशिष्ट नहीं है

— Cory डेनियलसन

var newstate = {}; newstate [event.target.id] = event.target.id; this.setState (newstate);

— कोरी डेनियलसन

धन्यवाद, मेरे पास सामान्य रूप से वस्तुओं का उपयोग करने पर एक अच्छा हैंडल नहीं था।

— पारंपरिक

एक डुप्लिकेट ऑब्जेक्ट चर में जोड़े जाने के लिए मैं एक गतिशील कुंजी कैसे बनाऊं

— ivarni

@ मैं इस समस्या के साथ हूं लेकिन, आपने अपनी प्रारंभिक स्थिति पर क्या कहा? यह बात नहीं है, है ना?

— राफेल ओनोफ्रे सिप

Answer 1

@ Cory के संकेत के लिए धन्यवाद, मैंने इसका उपयोग किया:

inputChangeHandler : function (event) {
    var stateObject = function() {
      returnObj = {};
      returnObj[this.target.id] = this.target.value;
         return returnObj;
    }.bind(event)();

    this.setState( stateObject );    
},

यदि आपके JSX कोड को बदलने के लिए ES6 या बैबल ट्रांसपिलर का उपयोग किया जाता है , तो आप इसे गणना की गई संपत्ति के नाम के साथ भी पूरा कर सकते हैं:

inputChangeHandler : function (event) {
    this.setState({ [event.target.id]: event.target.value });
    // alternatively using template strings for strings
    // this.setState({ [`key${event.target.id}`]: event.target.value });
}

Comments

इसके लिए एक नया सिंटैक्स भी है, यदि आप अपना कोड बनाने के लिए bablejs का उपयोग कर रहे हैं। आप उपयोग कर सकते हैंcomputed property names

— Cory डेनियलसन

दूसरा दृष्टिकोण ब्राउज़र में वाइंडोज़ (IE, क्रोम) पर वाक्यविन्यास त्रुटि का कारण बनता है। किसी ने नोटिस किया?

— बेंजामिन

कैसे कहा जाए?

— मुनीम हबीब

धन्यवाद trad, यह वही है जो मैं <Radio />कार्यान्वयन के लिए कोड दोहराव से बचने के लिए देख रहा था ।

— आदेश एम।

यदि आप इस तरह गणना की गई संपत्ति के नाम का उपयोग करके एक राज्य सेट करते हैं: this.setState({ [event.target.id]: event.target.value });तो आप उस राज्य का उपयोग कैसे कर पाएंगे this.state......?

— user3574492

Answer 2

जब आपको कई नियंत्रित इनपुट तत्वों को संभालने की आवश्यकता होती है, तो आप प्रत्येक तत्व में एक नाम विशेषता जोड़ सकते हैं और हैंडलर फ़ंक्शन को चुन सकते हैं कि event.target.name के मूल्य के आधार पर क्या करना है।

उदाहरण के लिए:

inputChangeHandler(event) {
  this.setState({ [event.target.name]: event.target.value });
}

Comments

[Event.target.name] के आसपास कोष्ठक क्या इंगित करते हैं? उनकी आवश्यकता क्यों है?

— user798719

प्रत्येक तत्व को इस तरह नामित करने के लिए सामान्य दृष्टिकोण की तुलना में। itStateate ({userName: e.target.value}); यह प्रपत्र के कई तत्वों को एक सरणी के रूप में संभालेगा और प्रत्येक व्यक्तिगत तत्व को सेट करने की आवश्यकता नहीं होगी

— विक्रम jeet singh

लेकिन फिर भी मैं उसी तरह से उस स्थिति तक कैसे पहुँच सकता हूँ? पसंद है this.state([event.target.name])?

— किरणकुमार दफड़ा

मुझे लगता है कि एमडीएन वेब डॉक्स और यह पोस्ट बताती है कि हमें कोष्ठक की आवश्यकता क्यों है।

— केली

Answer 3

मैंने इसे कैसे पूरा किया ...

inputChangeHandler: function(event) {
  var key = event.target.id
  var val = event.target.value
  var obj  = {}
  obj[key] = val
  this.setState(obj)
},

Comments

मैंने इसी तरह से किया था, लेकिन समस्या यह थी कि यह अभी भी घटक को प्रस्तुत नहीं करता था, और मैंने पोस्ट करने के लिए पिलर चलाया (इसमें यह भी शामिल है: डी), और कहीं न कहीं यह पाया गया: this.forceUpdate();जो कि नवीनतम रिएक्ट के साथ ऐसा नहीं होना चाहिए था। चलिए देखते हैं कि बाद में क्या मुद्दा है !!

— xploreraj

Answer 4

मैं सिर्फ यह जोड़ना चाहता था, कि आप कोड को रीफैक्टर करने के लिए डी-स्ट्रक्चरिंग का भी उपयोग कर सकते हैं और इसे नॉटी लुक दे सकते हैं।

inputChangeHandler: function ({ target: { id, value }) {
    this.setState({ [id]: value });
},

Answer 5

.mapइस तरह काम के साथ पाश में :

{
    dataForm.map(({ id, placeholder, type }) => {
        return <Input
            value={this.state.type}
            onChangeText={(text) => this.setState({ [type]: text })}
            placeholder={placeholder}
            key={id} />
    })
}

पैरामीटर []में ध्यान दें type। उम्मीद है की यह मदद करेगा :)

Answer 6

मुझे भी ऐसी ही समस्या का समाधान करना पड़ा था।

मैं उस स्थिति को सेट करना चाहता था जहां एक चर में 2 स्तर की कुंजी संग्रहीत की गई थी।

जैसे this.setState({permissions[perm.code]: e.target.checked})

हालाँकि यह मान्य सिंटैक्स नहीं है।

मैंने इसे प्राप्त करने के लिए निम्नलिखित कोड का उपयोग किया:

this.setState({
  permissions: {
    ...this.state.permissions,
    [perm.code]: e.target.checked
  }
});

Answer 7

ES6 + के साथ आप बस कर सकते हैं [ ${variable}]

Answer 8

मैं एक सुंदर और सरल समाधान की तलाश में था और मुझे यह मिला:

this.setState({ [`image${i}`]: image })

उम्मीद है की यह मदद करेगा

Answer 9

this.setState({ [`${event.target.id}`]: event.target.value}, () => {
      console.log("State updated: ", JSON.stringify(this.state[event.target.id]));
    });

कृपया उद्धरण चरित्र का ध्यान रखें।

Answer 10

शब्दकोश के साथ आपका राज्य अन्य मूल्य को खोए बिना कुछ कुंजी अपडेट करता है

state = 
{   
    name:"mjpatel"  
    parsedFilter:
    {
      page:2,
      perPage:4,
      totalPages: 50,
    }
}

समाधान नीचे है

 let { parsedFilter } = this.state
 this.setState({
      parsedFilter: {
        ...this.state.parsedFilter,
        page: 5
      }
  });

5 मान के साथ यहां कुंजी "पेज" के लिए अद्यतन मूल्य

Answer 11

एक फैल सिंटैक्स का उपयोग कर सकते हैं, कुछ इस तरह से:

inputChangeHandler : function (event) {
    this.setState( { 
        ...this.state,
        [event.target.id]: event.target.value
    } );
},

Comments

रिएक्ट आपके लिए ऑब्जेक्ट मर्जिंग करेगा, यह बुरा अभ्यास है।

— रोहमर

मूल रूप से अगर आपके पास कुछ आंतरिक वस्तु है और आप उस आंतरिक वस्तु पर एक उचित को बदलना चाहते हैं, तो आप इसे इस तरह से करते हैं: इस.सेटस्टैट ({चयनितइमेट्स: {... चयनितइमेट्स, [आइटम.आईडी]: सच}}}

— एरन या