চেকবক্সে চেকড ডিফল্ট কীভাবে সেট করবেন রিঅ্যাকটিজেএস?

Question

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

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

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

Comments

facebook.github.io/react/docs/forms.html নিয়ন্ত্রিত এবং অনিয়ন্ত্রিত উপাদানগুলির মধ্যে পার্থক্য পরীক্ষা করুন।

— zerkms

Answer 1

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

একটি উদাহরণ:

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

Comments

তবে আমি ক্লাস হিসাবে ইনপুট তৈরি করি না, এটি React.createElement দ্বারা তৈরি করা হয়েছে। সুতরাং, কীভাবে ডিফল্ট সেট করবেন

— ইয়ারিন নিম

@ ইয়্যারিননিম আপনি renderউপরের <input>উপাদানটি ব্যবহার করতে পারেন । defaultCheckedমত একটি PARAM হিসাবে প্রদান করা যেতে পারে checkedকরা হয়।

— নাইটাসাগর

Answer 2

এটি সম্পাদন করার কয়েকটি উপায় রয়েছে, এখানে কয়েকটি:

রাজ্য হুক ব্যবহার করে লিখিত :

function Checkbox() {
  const [checked, setChecked] = React.useState(true);

  return (
    <label>
      <input type="checkbox"
        checked={checked}
        onChange={() => setChecked(!checked)}
      />
      Check Me!
    </label>
  );
}

ReactDOM.render(
  <Checkbox />,
  document.getElementById('checkbox'),
);

এখানে জেএসবিনের একটি লাইভ ডেমো রয়েছে ।

উপাদান ব্যবহার করে লিখিত :

class Checkbox extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isChecked: true,
    };
  }
  toggleChange = () => {
    this.setState({
      isChecked: !this.state.isChecked,
    });
  }
  render() {
    return (
      <label>
        <input type="checkbox"
          checked={this.state.isChecked}
          onChange={this.toggleChange}
        />
        Check Me!
      </label>
    );
  }
}

ReactDOM.render(
  <Checkbox />,
  document.getElementById('checkbox'),
);

এখানে জেএসবিনের একটি লাইভ ডেমো রয়েছে ।

Comments

রাজ্য-পূর্ণ! রাষ্ট্রহীন পন্থা সম্পর্কে কীভাবে?

— সবুজ

Answer 3

যদি চেকবক্সটি কেবল React.createElementতখনই তৈরি করা হয় তবে সম্পত্তিটি defaultCheckedব্যবহৃত হয়।

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

@ ন্যাশ_্যাগে জমা

Comments

এটি ঠিক নয় আপনি সাধারণ এইচটিএমএল ট্যাগের সাথেও (বর্গ => শ্রেণীর নাম) এবং (=> এইচটিএমএলফোড়) এর মতো একই সাথে ডিফল্টচেকডও ব্যবহার করতে পারেন ...

— ফারিদ অ্যালামনোর্মটি

Answer 4

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

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

অথবা

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

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

Comments

আপনি যদি চেক করা প্যারামিটারটি সরাসরি ব্যবহার করেন তবে আপনি এটিটি চেক করতে পারবেন না। এই ডিফল্টর জন্য চেকড প্যারামিটার ব্যবহার করতে হবে। ধন্যবাদ।

— কোডম্যান্যঘা

Answer 5

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

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

Comments

গ্রহণযোগ্য উত্তর হওয়া উচিত, যেহেতু বেশিরভাগ লোক এটিই খুঁজবে: নেটিভ এইচটিএমএল এর বিকল্প checked।

— ব্রাম ভ্যানরোয়

Answer 6

এটা কাজ করছে

<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 })}

Answer 7

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

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>

Comments

চেক করা

— অবহেলিত

@ এমবান্দা আপনি কি এ সম্পর্কিত আরও তথ্য সরবরাহ করার জন্য ডকুমেন্টেশন সরবরাহ করতে পারেন

— ব্র্যাড

আপনার এটি করা উচিত নয়। যদি আপনি "পরীক্ষিত" বৈশিষ্ট্যে স্ট্রিংটি পাস করেন তবে আপনি এই সতর্কতাটি পাবেন: "সতর্কতা: trueবুলিয়ান বৈশিষ্ট্যের জন্য স্ট্রিংটি পেয়েছে checkedthis যদিও এটি কাজ করে, আপনি" মিথ্যা "স্ট্রিংটি পাস করলে এটি প্রত্যাশা অনুযায়ী কাজ করবে না you আপনি কি বোঝাতে চেয়েছিলেন? চেক করা = {সত্য}? "

— পল.এগো

Answer 8

আমার ক্ষেত্রে আমি অনুভব করেছি যে "ডিফল্টচেকড" রাষ্ট্র / শর্তগুলির সাথে সঠিকভাবে কাজ করছে না। সুতরাং আমি রাষ্ট্রকে টগল করার জন্য "অন চেঞ্জ" দিয়ে "চেকড" ব্যবহার করেছি।

যেমন।

checked={this.state.enabled} onChange={this.setState({enabled : !this.state.enabled})}

Answer 9

আমি কিছু সময় আগে একটি কোড এখানে করেছি, এটি কার্যকর হতে পারে। আপনাকে এই লাইনটি সাথে খেলতে হবে => this.state = {চেক করা হয়েছে: মিথ্যা, চেক 2: সত্য};

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

    this.state = { checked: false, checked2: true};
    this.handleChange = this.handleChange.bind(this);
    this.handleChange2 = this.handleChange2.bind(this);

  }  

  handleChange() {
    this.setState({
        checked: !this.state.checked      
    })
  }

  handleChange2() {
    this.setState({
        checked2: !this.state.checked2      
    })
  }

  render() {
    const togglecheck1 = this.state.checked ? 'hidden-check1' : '';
    const togglecheck2 = this.state.checked2 ? 'hidden-check2' : '';

    return <div>
        <div>
        <label>Check 1</label>
        <input type="checkbox" id="chk1"className="chk11" checked={ this.state.checked } onChange={ this.handleChange } />
        <label>Check 2</label>
        <input type="checkbox" id="chk2" className="chk22" checked={ this.state.checked2 } onChange={ this.handleChange2 } />
      </div>

      <div className={ togglecheck1 }>show hide div with check 1</div>
      <div className={ togglecheck2 }>show hide div with check 2</div>

    </div>;
  }
}

ReactDOM.render(
  <Componente />,
  document.getElementById('container')
);

সিএসএস

.hidden-check1 {
  display: none;  
  }

.hidden-check2 {
  visibility: hidden;
}

এইচটিএমএল

  <div id="container">
      <!-- This element's contents will be replaced with your component. -->
  </div>

এখানে কোডপেন => http://codepen.io/parlop/pen/EKmaWM

Comments

আর একটি ... এটি রাষ্ট্র-পূর্ণ পদ্ধতির! রাষ্ট্রহীন সম্পর্কে কীভাবে?

— সবুজ

সবুজ, মানে কি?

— ওমারেজো

Answer 10

এটিকে খুব কঠিন করবেন না। প্রথমে নীচে দেওয়া একটি সাধারণ উদাহরণটি বুঝতে 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>

Answer 11

এটি খাঁটি জেএস দিয়ে করা যেতে পারে

              <Form.Group controlId="categoryStatus">
                <Form.Check
                  type="checkbox"
                  label="Category Status Active/In-active"
                  onChange={this.handleChecked}                 
                />
              </Form.Group>

  //Load category to form : to edit
  GetCategoryById(id) {
    this.UpdateId = id
    axios.get('http://localhost:4000/Category/edit/' + id)
      .then(response => {
        this.setState({
          category_name: response.data.category_name,
          category_description: response.data.category_description,
          is_active: response.data.is_active,
        });

        response.data.is_active == 1 ? document.getElementById("categoryStatus").checked = true : document.getElementById("categoryStatus").checked = false;
      })
      .catch(function (error) {
        console.log(error);
      })
  }

Answer 12

 <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)   }

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

Answer 13

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

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)} />

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