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




node.js reactjs (8)

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

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;

আমি আমার অ্যাপ্লিকেশনটি চালানোর সময় আমি নিম্নলিখিত সতর্কতাটি পাই:

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

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

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


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

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

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

this.state.name শুরু করে:

যেমন

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
    }

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

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

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

state = {
   myObject: undefined
}

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

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

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

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

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

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

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

তথ্যসূত্র: https://github.com/facebook/react/issues/6779#issuecomment-326314716


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

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

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

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

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


কনস্ট্রাক্টরের ক্ষেত্রে ক্ষেত্রের মান "" (খালি স্ট্রিং) নির্ধারণের একটি সম্ভাব্য অবক্ষয় হ'ল যদি ক্ষেত্রটি একটি fieldচ্ছিক ক্ষেত্র হয় এবং আনডিট করা না থাকে। আপনি যদি আপনার ফর্ম পোস্ট করার আগে কিছু ম্যাসেজ না করেন, ক্ষেত্রটি আপনার ডেটা স্টোরেজে NULL এর পরিবর্তে খালি স্ট্রিং হিসাবে অবিরত থাকবে।

এই বিকল্পটি খালি স্ট্রিংগুলি এড়িয়ে চলবে:

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

... 

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

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

this.state={ name:''};





react-state