चेकबॉक्स ReactJS में डिफ़ॉल्ट चेक सेट कैसे सेट करें?

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 नियंत्रित और अनियंत्रित घटकों के बीच अंतर की जाँच करें।

— झटके

Answer 1

एक बार जब आप इसे बदल देते हैं, तो बॉक्स के साथ बातचीत करने के लिए आपको चेकबॉक्स के लिए राज्य को अपडेट करना होगा। और एक डिफ़ॉल्ट सेटिंग के लिए आप उपयोग कर सकते हैं defaultChecked।

एक उदाहरण:

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

Comments

लेकिन मैं INPUT को क्लास के रूप में नहीं बनाता, यह React.createElement द्वारा बनाया गया है। तो, डिफ़ॉल्ट कैसे सेट करें

— यारिन निम

@ यारिनिम आप renderउपरोक्त <input>तत्व के साथ उपयोग कर सकते हैं । defaultCheckedकी तरह एक परम के रूप में प्रदान की जा सकती checkedहै।

— nitishagar

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'),
);

यहाँ JSBin पर एक लाइव डेमो है ।

घटकों का उपयोग कर लिखा गया :

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'),
);

यहाँ JSBin पर एक लाइव डेमो है ।

Comments

राज्य के पूर्ण! स्टेटलेस अप्रोच के बारे में कैसे?

— ग्रीन

Answer 3

यदि केवल चेकबॉक्स बनाया जाता है, React.createElementतो संपत्ति defaultCheckedका उपयोग किया जाता है।

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

श्रेय @nash_ag को

Comments

यह सही नहीं है कि आप सामान्य HTML टैग के साथ डिफ़ॉल्ट रूप से भी उपयोग कर सकते हैं, (वर्ग => className) और (=> htmlFor) के लिए और इसी तरह ...

— फरीद अलनमौर्ती

Answer 4

रिएक्ट प्रतिपादन जीवनचक्र में, फार्म तत्वों पर मूल्य विशेषता DOM में मूल्य को ओवरराइड करेगा। एक अनियंत्रित घटक के साथ, आप अक्सर प्रतिक्रिया चाहते हैं कि प्रारंभिक मूल्य निर्दिष्ट करें, लेकिन बाद के अपडेट को अनियंत्रित छोड़ दें। इस मामले को संभालने के लिए, आप मान के बजाय एक DefaultValue या defaultChecked विशेषता निर्दिष्ट कर सकते हैं।

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

या

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

कृपया defaultCheckedनीचे दिए गए चेकबॉक्स के बारे में अधिक जानकारी देखें: https://reactjs.org/docs/uncontrolled-compenders.html#default-values

Comments

यदि आप सीधे जाँच पैरामीटर का उपयोग करते हैं तो आप इसे अनचेक नहीं कर सकते हैं। इसके लिए defaultChecked पैरामीटर का उपयोग करना होगा। धन्यवाद।

— कोद्मनिघ

Answer 5

सही उत्तर के अलावा आप बस कर सकते हैं: पी

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

Comments

स्वीकृत उत्तर होना चाहिए, क्योंकि यह वही है जिसकी तलाश अधिकांश लोग करेंगे: देशी HTML का विकल्प 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

जांचा

— परखा

@Mbanda क्या आप इस पर अधिक जानकारी प्रदान करने के लिए दस्तावेज़ीकरण प्रदान कर सकते हैं

— ब्रैड

आपको ऐसा नहीं करना चाहिए। यदि आप "चेक्ड" प्रॉपर्टी को एक स्ट्रिंग पास करते हैं, तो आपको चेतावनी मिलेगी: "चेतावनी: trueबूलियन विशेषता के लिए स्ट्रिंग प्राप्त की checked। हालांकि यह काम करता है, यह अपेक्षा के अनुरूप काम नहीं करेगा यदि आप स्ट्रिंग" झूठी "पास करते हैं। जाँच = {सच}? "

— पॉल .गो

Answer 8

मेरे मामले में मैंने महसूस किया कि "defaultChecked" राज्यों / स्थितियों के साथ ठीक से काम नहीं कर रहा था। इसलिए मैंने राज्य को टॉगल करने के लिए "onChange" के साथ "चेक" किया।

उदाहरण के लिए।

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

Answer 9

यहां एक कोड है जो मैंने कुछ समय पहले किया था, यह उपयोगी हो सकता है। आपको इस पंक्ति => this.state = {check: false, check2: true} के साथ खेलना होगा;

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

फिर भी एक और ... यह राज्य-पूर्ण दृष्टिकोण है! स्टेटलेस के बारे में कैसे?

— ग्रीन

हरा, तुम्हारा क्या मतलब है?

— omarojo

Answer 10

इसे बहुत कठिन मत बनाओ। सबसे पहले, नीचे दिए गए एक सरल उदाहरण को समझें। यह आपको स्पष्ट होगा। इस स्थिति में, चेकबॉक्स को दबाने के बाद, हम राज्य से मान को पकड़ लेंगे (शुरू में यह गलत है), इसे अन्य मूल्य में बदल दें (शुरू में यह सच है) और तदनुसार राज्य सेट करें। यदि दूसरी बार चेकबॉक्स को दबाया जाता है, तो वह फिर से वही प्रक्रिया करेगा। मान को हथियाना (अब यह सच है), इसे बदलकर (झूठा करने के लिए) और फिर राज्य को तदनुसार सेट करें (अब यह फिर से गलत है। कोड नीचे साझा किया गया है।

भाग 1

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

भाग 2

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

भाग ३

  <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

यह शुद्ध js के साथ किया जा सकता है

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

मैंने कुछ समय बाद इसका पता लगा लिया। सोचा कि यह मदद कर सकता है y'all :)