একটি উপাদান রিঅ্যাক্টজেএস-এ ত্রুটি নিয়ন্ত্রণ করার জন্য টাইপ পাঠ্যের একটি অনিয়ন্ত্রিত ইনপুট পরিবর্তন করছে

Question

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

আমার কোডটি নিম্নলিখিত:

constructor(props) {
  super(props);
  this.state = {
    fields: {},
    errors: {}
  }
  this.onSubmit = this.onSubmit.bind(this);
}

....

onChange(field, e){
  let fields = this.state.fields;
  fields[field] = e.target.value;
  this.setState({fields});
}

....

render() {
  return(
    <div className="form-group">
      <input
        value={this.state.fields["name"]}
        onChange={this.onChange.bind(this, "name")}
        className="form-control"
        type="text"
        refs="name"
        placeholder="Name *"
      />
      <span style={{color: "red"}}>{this.state.errors["name"]}</span>
    </div>
  )
}

Comments

fieldsরাষ্ট্রের প্রাথমিক মান কী?

— মায়াঙ্ক শুক্ল

কনস্ট্রাক্টর (প্রপস) {সুপার (প্রপস); this.state = {ক্ষেত্র: {}, ত্রুটি: {}} this.onSubmit = this.onSubmit.bind (এটি); }

— রিয়া কাপুরিয়া

প্রতিক্রিয়ার

— মাইকেল ফ্রেইজিম

Answer 1

কারণটি হল, রাজ্যে আপনি সংজ্ঞায়িত:

this.state = { fields: {} }

একটি ফাঁকা বস্তু হিসাবে ক্ষেত্রগুলি, সুতরাং প্রথম রেন্ডারিংয়ের সময় this.state.fields.nameহবে undefinedএবং ইনপুট ক্ষেত্রটি এর মান হিসাবে পাবেন:

value={undefined}

যার কারণে, ইনপুট ক্ষেত্রটি অনিয়ন্ত্রিত হয়ে যাবে।

একবার আপনি ইনপুটতে কোনও মান প্রবেশ করালে, fieldsরাষ্ট্রটি এতে পরিবর্তিত হয়:

this.state = { fields: {name: 'xyz'} }

এবং সেই সময়ে ইনপুট ক্ষেত্রটি একটি নিয়ন্ত্রিত উপাদানগুলিতে রূপান্তরিত হয়; এজন্য আপনি ত্রুটিটি পাচ্ছেন:

কোনও উপাদান নিয়ন্ত্রণ করতে টাইপ পাঠ্যের একটি অনিয়ন্ত্রিত ইনপুট পরিবর্তন করছে।

সম্ভাব্য সমাধান:

1- fieldsরাজ্যটিকে রাষ্ট্র হিসাবে সংজ্ঞায়িত করুন :

this.state = { fields: {name: ''} }

2- বা শর্ট সার্কিটের মূল্যায়ন এই জাতীয় ব্যবহার করে মূল্য সংজ্ঞা নির্ধারণ করুন :

value={this.state.fields.name || ''}   // (undefined || '') = ''

Comments

পরেরটি "নিয়ন্ত্রিত" থাকা অবস্থায় অপরিজ্ঞাত হওয়ার কোনও কারণ আছে - এর অর্থ কী?

— প্রশান্ত সুব্রহ্মণিয়াম

@ প্রশান্তসুব্রাম্যানিয়ান সম্ভবত এটি এটি আরও ভালভাবে বুঝতে সাহায্য করতে পারে। reactjs.org/docs/forms.html# নিয়ন্ত্রণ নিয়ন্ত্রিত উপাদান

— রোটিমি-সেরা

পরিবর্তনের ইভেন্টের সময় আমার রাজ্যে কোনও সংজ্ঞায়িত নেই

— আলেক্সি শ।

কারণ ''একটি বৈধ স্ট্রিং মান। সুতরাং আপনি যখন '''xyz' এ পরিবর্তন করবেন, ইনপুট প্রকারটি নিয়ন্ত্রিত থেকে নিয়ন্ত্রিত হওয়ার অর্থ পরিবর্তন হয় না। তবে টাইপ undefinedকরার ক্ষেত্রে xyzনিয়ন্ত্রণহীন থেকে নিয়ন্ত্রিত হয়ে যাবে।

— মায়াঙ্ক শুক্ল

আশ্চর্যজনক! কারণ আমি সরকারী দস্তাবেজে এটি উল্লিখিতটি দেখিনি, বা আমি অন্ধ? উত্স দয়া করে লিঙ্ক করুন :)

— ধীররাজ

Answer 2

পরিবর্তন valueকরার জন্য defaultValueতা সমাধান হবে।

দ্রষ্টব্য :

defaultValueশুধুমাত্র প্রাথমিক লোডের জন্য। আপনি যদি আরম্ভ করতে চান inputতবে আপনার ব্যবহার করা উচিত defaultValue, তবে আপনি যদি stateমানটি পরিবর্তন করতে চান তবে আপনাকে ব্যবহার করা উচিত value। পড়ুন এই আরো অনেক কিছুর জন্য।

আমি ব্যবহৃত value={this.state.input ||""}মধ্যে inputসতর্কতাটি পরিত্রাণ পেতে।

Comments

ধন্যবাদ! আমি এই সমস্যাটি পেরিয়ে এসেছি এবং অন্যান্য সমাধানগুলি আমার জন্য প্রযোজ্য হয়নি, তবে এই সমাধানটি সাহায্য করেছিল।

— মরিচ অ্যাডডিক্ট

Answer 3

উপাদানটির ভিতরে ইনপুট বাক্সটি নিম্নলিখিত উপায়ে রাখুন।

<input className="class-name"
              type= "text"
              id="id-123"
              value={ this.state.value || "" }
              name="field-name"
              placeholder="Enter Name"
              />

Answer 4

সিম্পলওয়াই, আপনাকে প্রথমে প্রাথমিক অবস্থা সেট করতে হবে

আপনি যদি সেট না করেন প্রাথমিক অবস্থা প্রতিক্রিয়া এটি একটি অনিয়ন্ত্রিত উপাদান হিসাবে বিবেচনা করবে

Answer 5

গৃহীত উত্তর ছাড়াও, আপনি একটি ব্যবহার করছেন যদি inputধরনের checkboxবা radio, আমি পেয়েছি আমি নাল / অনির্ধারিত পরীক্ষা দরকার checkedপাশাপাশি অ্যাট্রিবিউট।

<input
  id={myId}
  name={myName}
  type="checkbox" // or "radio"
  value={myStateValue || ''}
  checked={someBoolean ? someBoolean : false}
  />

এবং যদি আপনি টিএস (বা ব্যাবেল) ব্যবহার করেন তবে আপনি লজিক্যাল ওআর অপারেটরের পরিবর্তে নালিশ কোয়েলসিং ব্যবহার করতে পারেন:

value={myStateValue ?? ''}
checked={someBoolean ?? false}

Answer 6

প্রথমে কারেন্ট স্টেট সেট করুন ...this.state

এটি কারণ যখন আপনি একটি নতুন রাষ্ট্র নির্ধারণ করতে যাচ্ছেন তখন এটি সংজ্ঞায়িত হতে পারে। সুতরাং এটি বর্তমানের স্থিতিও স্থিতি স্থিতির দ্বারা স্থির করা হবে

this.setState({...this.state, field})

যদি আপনার রাজ্যে কোনও অবজেক্ট থাকে তবে আপনার নিম্নরূপে রাজ্যটি সেট করা উচিত, ধরুন আপনাকে ব্যবহারকারীর অবজেক্টের মধ্যে ব্যবহারকারীর নাম সেট করতে হবে।

this.setState({user:{...this.state.user, ['username']: username}})

Comments

যতদূর আমি এটি বুঝতে পারি, সেটস্টেট ইতিমধ্যে কেবল ক্ষেত্রগুলিকে ওভাররাইড করে, তাই প্রথম ক্ষেত্রে এটি ডেস্ট্রাকচার নির্ধারণের জন্য অপ্রয়োজনীয় হওয়া উচিত। দ্বিতীয় স্টেটে এটি প্রয়োজনীয় হতে পারে যেহেতু সেটস্টেট কোনও উপ-বস্তুর পাইকারকে প্রতিস্থাপন করবে।

— Kzqai

Answer 7

const [name, setName] = useState()

আপনি পাঠ্য ক্ষেত্রে টাইপ করার সাথে সাথে ত্রুটি তৈরি করে

const [name, setName] = useState('') // <-- by putting in quotes 

এই স্ট্রিং উদাহরণে সমস্যাটি ঠিক করবে।

Answer 8

আপনি যদি ক্ষেত্রের মধ্যে একাধিক ইনপুট ব্যবহার করেন তবে অনুসরণ করুন: উদাহরণস্বরূপ:

class AddUser extends React.Component {
   constructor(props){
     super(props);

     this.state = {
       fields: { UserName: '', Password: '' }
     };
   }

   onChangeField = event => {
    let name = event.target.name;
    let value = event.target.value;
    this.setState(prevState => {
        prevState.fields[name] =  value;
        return {
           fields: prevState.fields
        };
    });
  };

  render() { 
     const { UserName, Password } = this.state.fields;
     return (
         <form>
             <div>
                 <label htmlFor="UserName">UserName</label>
                 <input type="text" 
                        id='UserName' 
                        name='UserName'
                        value={UserName}
                        onChange={this.onChangeField}/>
              </div>
              <div>
                  <label htmlFor="Password">Password</label>
                  <input type="password" 
                         id='Password' 
                         name='Password'
                         value={Password}
                         onChange={this.onChangeField}/>
              </div>
         </form>
     ); 
  }
}

আপনার সমস্যাটি এখানে অনুসন্ধান করুন:

onChangeField = event => {
    let name = event.target.name;
    let value = event.target.value;
    this.setState(prevState => {
        prevState.fields[name] =  value;
        return {
            fields: prevState.fields
        };
    });
};

Answer 9

প্রতিক্রিয়া হুক ব্যবহার করেও প্রাথমিক মান নির্ধারণ করতে ভুলবেন না।
আমি ব্যবহার করছি <input type='datetime-local' value={eventStart} />এবং প্রাথমিক eventStartমত ছিল

const [eventStart, setEventStart] = useState();
পরিবর্তে
const [eventStart, setEventStart] = useState('');।

বন্ধনীগুলিতে ফাঁকা স্ট্রিংটি পার্থক্য।
এছাড়াও, আপনি যদি আমার মতো জমা দেওয়ার পরে ফর্মটি পুনরায় সেট করেন তবে আবার আপনাকে খালি স্ট্রিংয়ে সেট করতে হবে, কেবল খালি বন্ধনী নয়।

এটি কেবল এই বিষয়ে আমার ছোট অবদান, সম্ভবত এটি কাউকে সহায়তা করবে।

Answer 10

আমার ক্ষেত্রে মায়াঙ্ক শুক্লার শীর্ষ উত্তরটি যা বলেছিল তা অনেকটাই ছিল। কেবলমাত্র বিশদটি ছিল আমার রাজ্যটিতে আমি যে সম্পত্তি সংজ্ঞা দিচ্ছিলাম তার সম্পূর্ণ অভাব ছিল।

উদাহরণস্বরূপ, আপনার যদি এই অবস্থা থাকে:

state = {
    "a" : "A",
    "b" : "B",
}

আপনি যদি আপনার কোডটি প্রসারিত করছেন তবে আপনি একটি নতুন প্রপ যোগ করতে চাইতে পারেন, তাই আপনার কোডের অন্য কোনও জায়গায় আপনি একটি নতুন সম্পত্তি তৈরি করতে পারেন cযার মান কেবলমাত্র উপাদানটির রাজ্যে অপরিজ্ঞাত নয় তবে সম্পত্তি নিজেই অপরিজ্ঞাত।

এটি সমাধানের cজন্য আপনার রাজ্যে যুক্ত হওয়া এবং এটির জন্য একটি প্রাথমিক প্রাথমিক মান দেওয়ার বিষয়টি নিশ্চিত করুন ।

যেমন,

state = {
    "a" : "A",
    "b" : "B",
    "c" : "C", // added and initialized property!
}

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

Answer 11

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

export default ({  valueName, onChangeAllg,}) => {

          <TextField
            id={"name"}
            select
            label={"name"}
            value={valueName.geschlecht || ""}
            name={"name"}
            onChange={onChangeAllg}

          >
            {nameList.map((option) => (
              <MenuItem key={option.value} value={option.value}>
                {option.label}
              </MenuItem>
            ))}
          </TextField>

আমি চেষ্টা করেছি ({ valueName, valueName: {geschlecht=""}, onChangeAllg,})এবংvalue={valueName.geschlecht || ""}

Comments

আমি এটি খুঁজে পেয়েছি। defaultValue={""}টেক্সটফিল্ডের একটি অভ্যন্তর অনুপস্থিত ছিল

— ডাঃ

Answer 12

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

সমাধান: মানটি নির্ধারিত নয় কিনা তা পরীক্ষা করুন

প্রতিক্রিয়া / ফর্মিক / বুটস্ট্র্যাপ / টাইপস্ক্রিপ্ট

উদাহরণ:

{ values?.purchaseObligation.remainingYear ?
  <Input
   tag={Field}
   name="purchaseObligation.remainingYear"
   type="text"
   component="input"
  /> : null
}