ReactJS onaylı varsayılan onay kutusu nasıl ayarlanır?

Varsayılan değerle atandıktan sonra onay kutusu durumunu güncelleme konusunda sorun yaşıyorum checked="checked"React'ta .

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

Atadıktan sonra checked="checked", işaretini kaldırmak / işaretini kaldırmak için onay kutusu durumunu etkileştiremiyorum.

Kutuyla etkileşime geçmek için, onay kutusunun durumunu değiştirdikten sonra güncellemeniz gerekir. Ve varsayılan bir ayara sahip olmak için kullanabilirsiniz defaultChecked.

Bir örnek:

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

Bunu başarmanın birkaç yolu vardır, işte birkaç tane:

Devlet Kancaları kullanılarak yazılmıştır :

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

İşte JSBin'de canlı bir demo .

Bileşenler kullanılarak yazılmıştır :

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

İşte JSBin'de canlı bir demo .

Onay kutusu yalnızca ile oluşturulmuşsa React.createElement, özellik defaultCheckedkullanılır.

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

@Nash_ag'e teşekkür ederiz

Tepki oluşturma yaşam döngüsünde, form öğelerindeki değer özniteliği DOM'daki değeri geçersiz kılar. Kontrolsüz bir bileşenle, React'ın ilk değeri belirtmesini istersiniz, ancak sonraki güncellemeleri kontrolsüz bırakırsınız. Bu durumu işlemek için değer yerine bir defaultValue veya defaultChecked niteliği belirleyebilirsiniz.

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

Veya

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

Lütfen defaultCheckedaşağıdaki onay kutusu ile ilgili daha fazla ayrıntıya göz atın: https://reactjs.org/docs/uncontrolled-components.html#default-values

Doğru cevaba ek olarak şunları yapabilirsiniz: P

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

Çalışıyor

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

Ve işlev başlat

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

Giriş onay kutusunun işaretli özelliğine "true" veya "" iletebilirsiniz. Boş tırnak işaretleri ("") yanlış olarak anlaşılacak ve öğe işaretlenmeyecektir.

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>

Benim durumumda "defaultChecked" durumları / koşulları ile düzgün çalışmadığını hissettim. Ben durumu değiştirmek için "onChange" ile "kontrol" kullandı.

Örneğin.

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

İşte bir süre önce yaptığım bir kod, yararlı olabilir. bu çizgiyle oynamalısınız => this.state = {işaretli: yanlış, işaretli2: doğru};

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

CSS

.hidden-check1 {
  display: none;  
  }

.hidden-check2 {
  visibility: hidden;
}

HTML

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

işte kod dosyası => http://codepen.io/parlop/pen/EKmaWM

Çok zorlama. İlk olarak, aşağıda verilen basit bir örneği anlayın. Size açık olacak. Bu durumda, onay kutusuna bastıktan hemen sonra, değeri durumdan alırız (başlangıçta yanlıştır), başka bir değere değiştiririz (başlangıçta doğrudur) ve durumu buna göre ayarlarız. Onay kutusuna ikinci kez basılırsa, aynı işlemi tekrar yapar. Değeri kavramak (şimdi doğru), değiştirmek (yanlış) ve sonra durumu buna göre ayarlayın (şimdi tekrar yanlış. Kod aşağıda paylaşılıyor.

Bölüm 1

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

Bölüm 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 
  });
}; 

3.Bölüm

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

Bu saf js ile yapılabilir

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

 <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 (olay) {

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

Yukarıdaki tutamaç, işaretlendiğinde veya denetlenmediğinde size doğru veya yanlış değerini verir

Durumu herhangi bir [] türü olarak ayarladım. ve kurucuda durumu null değerine ayarlayın.

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

Giriş öğesinde

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

Bir süre sonra anladım. Hepinize yardımcı olacağını düşündüm :)