reactjs - চেকবক্সে চেকড ডিফল্ট কীভাবে সেট করবেন?




checkbox (8)

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

<input name="remember" type="checkbox" defaultChecked/>

অথবা

        <input
          type="checkbox"
          defaultChecked={true}
        />

দয়া করে নীচের চেকবক্সের জন্য defaultChecked আরও বিশদটি চেকআউট করুন: https://reactjs.org/docs/uncontrolled-components.html#default-values

প্রতিক্রিয়াটিতে ডিফল্ট মান পরীক্ষিত = "পরীক্ষিত" সুনির্দিষ্ট হওয়ার পরে আমার চেকবক্সের অবস্থা আপডেট করতে আমার সমস্যা হচ্ছে।

var rCheck = React.createElement('input',
                                 {type: 'checkbox', checked:'checked', value: true},
                                 'Check here');

checked="checked" বরাদ্দের পরে, আমি checked="checked" / চেক করতে ক্লিক করে চেকবক্সের সাথে ইন্টারঅ্যাক্ট করতে পারি না।


আপনি "সত্য" বা "" ইনপুট চেকবক্সের চেক করা সম্পত্তিটিতে যেতে পারেন। খালি উদ্ধৃতি ("") মিথ্যা হিসাবে বোঝা হবে এবং আইটেমটি চেক করা হবে না।

let checked = variable === value ? "true" : "";
<input
     className="form-check-input"
    type="checkbox"
    value={variable}
    id={variable}
    name={variable}
    checked={checked}
/>
<label className="form-check-label">{variable}</label>

আমি রাষ্ট্রকে কোনও [] প্রকার হিসাবে সেট করেছি। এবং কনস্ট্রাক্টরে রাজ্যটি বাতিল করে দেয়।

onServiceChange = (e) => {
    const {value} = e.target;
    const index = this.state.services.indexOf(value);
    const services = this.state.services.filter(item => item !== value);
    this.setState(prevState => ({
        services: index === -1 ? prevState.services.push(value) && prevState.services : this.state.services.filter(item => item !== value)
    }))
}

ইনপুট উপাদানটিতে

this.onServiceChange (e)} /> this.onServiceChange (e)} /> this.onServiceChange (e)} /> this.onServiceChange (e)} />

আমি কিছু সময় পরে এটি আউট। ভেবেছিল এটি আপনার সকলকে সাহায্য করতে পারে :)


এটা কাজ করছে

<input type="checkbox" value={props.key} defaultChecked={props.checked} ref={props.key} onChange={this.checkboxHandler} />

এবং এটি init ফাংশন

{this.viewCheckbox({ key: 'yourKey', text: 'yourText', checked: this.state.yourKey })}

এটিকে খুব কঠিন করবেন না। প্রথমে নীচে দেওয়া একটি সাধারণ উদাহরণটি বুঝতে understand এটি আপনার কাছে পরিষ্কার হবে। এই ক্ষেত্রে, চেকবক্সটি চাপ দেওয়ার পরে, আমরা রাষ্ট্রের কাছ থেকে মানটি ধরব (প্রাথমিকভাবে এটি মিথ্যা), এটি অন্য মানতে পরিবর্তন করব (প্রাথমিকভাবে এটি সত্য) এবং সেই অনুযায়ী রাষ্ট্রটি সেট করব। দ্বিতীয়বার চেকবক্সটি টিপলে এটি আবার একই প্রক্রিয়াটি করবে। মানটি ধরা (এখন এটি সত্য), এটিকে পরিবর্তন করুন (ভুয়াতে) এবং তারপরে রাষ্ট্রটি সেট করুন (এখন এটি আবার মিথ্যা। কোডটি নীচে ভাগ করা হয়েছে।

অংশ 1

state = {
  verified: false
} // The verified state is now false

অংশ ২

verifiedChange = e => {
  // e.preventDefault(); It's not needed
  const { verified } = e.target;
  this.setState({
    verified: !this.state.verified // It will make the default state value(false) at Part 1 to true 
  });
}; 

পার্ট 3

  <form> 
      <input
          type="checkbox"
          name="verified"
          id="verified"
          onChange={this.verifiedChange} // Triggers the function in the Part 2
          value={this.state.verified}
      />
      <label for="verified">
      <small>Verified</small>
      </label>
  </form>

বাক্সটির সাথে ইন্টারঅ্যাক্ট করার জন্য আপনাকে একবার চেকবক্সটি পরিবর্তন করার পরে রাষ্ট্র আপডেট করতে হবে। এবং একটি ডিফল্ট সেটিংস রাখতে আপনি defaultChecked ব্যবহার করতে পারেন।

একটি উদাহরণ:

<input type="checkbox" defaultChecked={this.state.chkbox} onChange={this.handleChangeChk} />

সঠিক উত্তর ছাড়াও আপনি কেবল করতে পারেন: পি

React.createElement('input',{type: 'checkbox', defaultChecked: true});

 <div className="form-group">
          <div className="checkbox">
            <label><input type="checkbox" value="" onChange={this.handleInputChange.bind(this)}  />Flagged</label>
            <br />
            <label><input type="checkbox" value=""  />Un Flagged</label>
          </div>
        </div

handleInputChange (ঘটনা) {

console.log("event",event.target.checked)   }

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







checkbox