javascript প্রতিক্রিয়া-একটি অপ্রয়োজনীয় ইনপুট পরিবর্তন




node.js reactjs (8)

আমি একটি মান আছে যেহেতু আমার ইনপুট নিয়ন্ত্রণ করা হয়।

একটি ইনপুট নিয়ন্ত্রিত করার জন্য, তার মান একটি রাষ্ট্র পরিবর্তনশীল অনুরূপ হতে হবে।

এই শর্তটি প্রাথমিকভাবে আপনার উদাহরণে পূরণ করা হয়নি কারণ এই। this.state.name প্রাথমিকভাবে সেট করা হয়নি। অতএব, ইনপুট প্রাথমিকভাবে নিরোধক হয়। onChange হ্যান্ডলার প্রথমবারের মতো ট্রিগার হয়ে গেলে, this.state.name সেট হয়ে যায়। সেই সময়ে, উপরের শর্তটি সন্তুষ্ট এবং ইনপুট নিয়ন্ত্রণ করা হয় বলে মনে করা হয়। Uncontrolled থেকে নিয়ন্ত্রিত এই রূপান্তর উপরে দেখা ত্রুটি উত্পন্ন করে।

this.state.name এই this.state.name আরম্ভ করে:

যেমন

this.state = { name: '' };

ইনপুট শুরু থেকে নিয়ন্ত্রণ করা হবে, সমস্যা ফিক্সিং। আরো উদাহরণের জন্য কন্ট্রোল কন্ট্রোল দেখুন।

এই ত্রুটি সম্পর্কিত, আপনি শুধুমাত্র একটি ডিফল্ট এক্সপোর্ট থাকা উচিত। আপনার কোড উপরে দুই আছে।

আমার এমন একটি ফর্মের সাথে একটি সাধারণ প্রতিক্রিয়া উপাদান রয়েছে যা আমি একটি নিয়ন্ত্রিত ইনপুট হিসাবে বিশ্বাস করি:

import React from 'react';

export default class MyForm extends React.Component {
    constructor(props) {
        super(props);
        this.state = {}
    }

    render() {
        return (
            <form className="add-support-staff-form">
                <input name="name" type="text" value={this.state.name} onChange={this.onFieldChange('name').bind(this)}/>
            </form>
        )
    }

    onFieldChange(fieldName) {
        return function (event) {
            this.setState({[fieldName]: event.target.value});
        }
    }
}

export default MyForm;

যখন আমি আমার আবেদন চালাতে পারি তখন আমি নিম্নলিখিত সতর্কতা পাই:

সতর্কতা: MyForm নিয়ন্ত্রিত করার জন্য টাইপ পাঠ্যের একটি অননুমোদিত ইনপুট পরিবর্তন করছে। ইনপুট উপাদান নিয়ন্ত্রণহীন (বা বিপরীত) নিয়ন্ত্রিত থেকে স্যুইচ করা উচিত নয়। উপাদান সারা জীবনের জন্য একটি নিয়ন্ত্রিত বা uncontrolled ইনপুট উপাদান ব্যবহার করে সিদ্ধান্ত নিন

আমি একটি মান আছে যেহেতু আমার ইনপুট নিয়ন্ত্রণ করা হয়। আমি ভাবছি আমি কি ভুল করছি?

আমি প্রতিক্রিয়া ব্যবহার করছি 15.1.0


প্রাথমিক অবস্থায় 'নাম' সম্পত্তির একটি মান সেট করুন।

this.state={ name:''};


আমার ক্ষেত্রে, আমি সত্যিই কিছু তুচ্ছ ছিল অনুপস্থিত।

<input value={state.myObject.inputValue} />

আমি যখন সতর্কতা পাচ্ছিলাম তখন আমার রাষ্ট্র নিম্নলিখিত ছিল:

state = {
   myObject: undefined
}

আমার মূল্যের ইনপুট রেফারেন্স করার জন্য আমার রাষ্ট্রের বিকল্প অনুসারে, আমার সমস্যা সমাধান করা হয়েছে:

state = {
   myObject: {
      inputValue: ''
   }
}

যদি ক্ষেত্রটি একটি ঐচ্ছিক ক্ষেত্র হয় এবং নির্বিশেষে ছেড়ে দেওয়া হয় তবে কন্সট্রকটারে ক্ষেত্রের মানটি সেট করা (খালি স্ট্রিং) সহ একটি সম্ভাব্য নেতিবাচক ক্ষেত্র। আপনার ফর্মটি পোস্ট করার আগে কিছু ম্যাসেজিং না করা পর্যন্ত, ক্ষেত্রটি আপনার ডেটা সঞ্চয়স্থানে নুল পরিবর্তে খালি স্ট্রিং হিসাবে স্থায়ী হবে।

এই বিকল্প খালি স্ট্রিং এড়াতে হবে:

constructor(props) {
    super(props);
    this.state = {
        name: null
    }
}

... 

<input name="name" type="text" value={this.state.name || ''}/>

এটি সাধারণত তখনই ঘটে যখন আপনি আবেদনটি শুরু হওয়ার পরে এবং কিছু ইভেন্টের পরে বা কিছু ফাংশন বহিস্কার বা রাষ্ট্র পরিবর্তিত হওয়ার পরে দায়ের করা মূল্য নিয়ন্ত্রণ না করে, আপনি এখন ইনপুট ক্ষেত্রের মান নিয়ন্ত্রণ করার চেষ্টা করছেন।

ইনপুট ওভার নিয়ন্ত্রণ না থাকার এই পরিবর্তন এবং তারপরে তার উপর নিয়ন্ত্রণ থাকার বিষয়টি প্রথম স্থানে ঘটতে পারে।

এটিকে এড়াতে সর্বোত্তম উপায় কম্পোনেন্টের কন্সট্রকটারে ইনপুটের জন্য কিছু মান ঘোষণা করে। তাই ইনপুট উপাদান অ্যাপ্লিকেশন শুরু থেকে মান আছে।


আরেকটি পদ্ধতি এটি আপনার ইনপুটের ভিতরে ডিফল্ট মান নির্ধারণ করতে পারে, এটির মতো:

 <input name="name" type="text" value={this.state.name || ''} onChange={this.onFieldChange('name').bind(this)}/>

যখন আপনি onChange={this.onFieldChange('name').bind(this)} ব্যবহার করেন, তখন আপনার onChange={this.onFieldChange('name').bind(this)} আপনার সম্পত্তি খালি স্ট্রিংটি আপনার সম্পত্তি খালি স্ট্রিং হিসাবে ঘোষণা করতে হবে।

ভুল উপায়:

this.state ={
       fields: {},
       errors: {},
       disabled : false
    }

সঠিক পথ:

this.state ={
       fields: {
         name:'',
         email: '',
         message: ''
       },
       errors: {},
       disabled : false
    }

আমি অন্যদের ইতিমধ্যে এই উত্তর আছে জানি। কিন্তু এখানে এমন একটি গুরুত্বপূর্ণ উপাদান যা অন্য লোকেদের একই রকম সমস্যার সম্মুখীন হতে সহায়তা করবে:

আপনার ইনপুট ক্ষেত্রে (যেমন টেক্সটফিল্ড, চেকবক্স, রেডিও, ইত্যাদি) onChange হ্যান্ডলার থাকা দরকার। এবং onChange হ্যান্ডলারের মাধ্যমে কার্যকলাপ পরিচালনা করুন, যেমন:

<input ... onChange={ this.myChangeHandler} ... />

এবং যখন আপনি চেকবাক্সের সাথে কাজ করছেন তখন আপনাকে তার checked অবস্থাটি পরিচালনা করতে হবে !! মত:

<input type="checkbox" checked={!!this.state.someValue} onChange={.....} >

রেফারেন্স: https://github.com/facebook/react/issues/6779#issuecomment-326314716





react-state