গতিশীল কী নামের সাথে রিটেক্টস সেটস্টেট ()?

Question

সম্পাদনা: এটি একটি সদৃশ, এখানে দেখুন

রাজ্যটি নির্ধারণের সময় গতিশীল কী নাম ব্যবহার করার কোনও উদাহরণ আমি পাই না। এটি আমি করতে চাই:

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

যেখানে ইভেন্ট.টারেজেট.আইডি আপডেট হওয়ার জন্য রাজ্য কী হিসাবে ব্যবহৃত হয়। প্রতিক্রিয়া কি এটি সম্ভব নয়?

Comments

এটি গতিশীল অবজেক্ট কী সম্পর্কিত কোনও প্রশ্নের সদৃশ। এটি প্রতিক্রিয়া জানাতে সুনির্দিষ্ট নয়

— কোরি ড্যানিয়েলসন

var newstate = {}; newstate [ইভেন্ট.target.id] = ইভেন্ট.target.id; this.setState (newstate);

— কোরি ড্যানিয়েলসন

আপনাকে ধন্যবাদ, সাধারণভাবে অবজেক্টগুলি ব্যবহার করার ক্ষেত্রে আমার কাছে ভাল হ্যান্ডেল ছিল না।

— Trad

জাভাস্ক্রিপ্ট অবজেক্ট ভেরিয়েবলে যুক্ত করার জন্য আমি কীভাবে একটি গতিশীল কী তৈরি করব তার

— ivarni

@ ট্র্যাড আমি এই সমস্যার সাথে আছি তবে, আপনি আপনার প্রাথমিক অবস্থাটি কী রেখেছিলেন? ব্যাপার না, তাই না?

— রাফেল অনোফ্রে

Answer 1

@ কোরির ইঙ্গিতকে ধন্যবাদ, আমি এটি ব্যবহার করেছি:

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

    this.setState( stateObject );    
},

যদি আপনার জেএসএক্স কোডটি রূপান্তর করতে 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

এর জন্য একটি নতুন সিনট্যাক্সও রয়েছে, যদি আপনি নিজের কোড তৈরি করতে বাবলজেস ব্যবহার করেন। আপনি ব্যবহার করতে পারেনcomputed property names

— কোরি ড্যানিয়েলসন

দ্বিতীয় পদ্ধতির কারণে উইন্ডোজ (আই, ক্রোম) এর ব্রাউজারগুলিতে সিনট্যাক্স ত্রুটির সৃষ্টি হয়। কেউ খেয়াল করেছেন?

— বেনজামিনজ

কিভাবে বিবৃত হবে?

— মুনিম হাবিব

ধন্যবাদ trad, <Radio />বাস্তবায়নের জন্য কোড নকল এড়াতে আমি এটিই খুঁজছিলাম ।

— আবেদ এম

আপনি যদি এইরূপে গণিত সম্পত্তি নাম ব্যবহার করে একটি রাজ্য সেট করেন: this.setState({ [event.target.id]: event.target.value });তবে আপনি কীভাবে সেই রাজ্যটি ব্যবহার করে অ্যাক্সেস করবেন this.state......?

— ব্যবহারকারী 3574492

Answer 2

যখন আপনাকে একাধিক নিয়ন্ত্রিত ইনপুট উপাদানগুলি হ্যান্ডেল করার দরকার হয়, আপনি প্রতিটি উপাদানের সাথে একটি নাম বৈশিষ্ট্য যুক্ত করতে পারেন এবং হ্যান্ডলারটি ফাংশনটিকে ইভেন্ট.টারাগেট.নামের মানের ভিত্তিতে কী করতে হবে তা চয়ন করতে পারেন।

উদাহরণ স্বরূপ:

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

Comments

[ইভেন্ট.target.name] এর চারপাশে বন্ধনীগুলি কী বোঝায়? কেন তাদের প্রয়োজন হয়?

— ব্যবহারকারী 798719

প্রতিটি উপাদানকে আলাদাভাবে এই.সেটস্টেটের মতো নামকরণের স্বাভাবিক পদ্ধতির তুলনায় ({ব্যবহারকারীর নাম: e.target.value}); এটি ফর্মের একাধিক উপাদানকে অ্যারে হিসাবে পরিচালনা করবে এবং প্রতিটি পৃথক উপাদান সেট করার প্রয়োজন হবে না

— বিক্রম জিত সিং

কিন্তু তবুও আমি কীভাবে সেই স্থানে অ্যাক্সেস করব? পছন্দ this.state([event.target.name])?

— কিরণকুমার দাফদা

আমি মনে করি MDN ওয়েব ডক্স এবং এই পোস্টটি কেন আমাদের বন্ধনী প্রয়োজন তা ব্যাখ্যা করে।

— কেলি

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();সর্বশেষ প্রতিক্রিয়াটির ক্ষেত্রে এটি হওয়া উচিত ছিল না। আসুন দেখি কী ইস্যু পরে !!

— এক্সপ্লোররাজ

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

আমারও একই সমস্যা ছিল।

আমি যেখানে দ্বিতীয় স্তরের কীটি ভেরিয়েবলের মধ্যে সঞ্চয় করা হয়েছিল তার স্থিতি সেট করতে চেয়েছিলাম।

যেমন 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

প্রতিক্রিয়া আপনার জন্য বস্তুটি মার্জ করবে, এটি খারাপ অভ্যাস।

— রোহমার

মূলত যদি আপনার কিছু অভ্যন্তরীণ বস্তু থাকে এবং আপনি সেই অভ্যন্তরীণ বস্তুটিতে একটি প্রীতি পরিবর্তন করতে চান তবে আপনি এটি করতে পারেন: this.setState ({নির্বাচিত আইটেমস: {... নির্বাচিত সামগ্রী, [আইটেম আইড]: সত্য}})

— বা