Comment définir Cochée par défaut dans la case ReactJS?

Je vais avoir du mal à mettre à jour la case à cocher état après il est affecté avec la valeur par défaut checked="checked" à Réagir.

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

Après l'affectation de checked="checked", je ne peux pas interagir la case de l'état en cliquant décocher/cocher.

facebook.github.io/react/docs/forms.html par Chèque de la différence entre contrôlées et non contrôlées des composants.

InformationsquelleAutor Yarin Nim | 2015-08-24

checkbox reactjs

183

D'interagir avec la boîte, vous devez mettre à jour l'état de la case une fois que vous changer. Et pour avoir un réglage par défaut vous pouvez utiliser defaultChecked.

Un exemple:
```
<input type="checkbox" defaultChecked={this.state.chkbox} onChange={this.handleChangeChk} />
```
- mais je n'ai pas créer l'ENTRÉE de la classe, il est créé à Réagir.createElement. Alors, comment définir par défaut
- Vous pouvez utiliser render ci-dessus <input> élément. Le defaultChecked peuvent être fournis comme un param comme checked est.
- Merci m'a beaucoup aidé
InformationsquelleAutor nitishagar
45

Si la case est créé uniquement avec React.createElement alors la propriété
defaultChecked est utilisé.
```
React.createElement('input',{type: 'checkbox', defaultChecked: false});
```
De crédit à @nash_ag
- ce n'est pas de droite, vous pouvez utiliser defaultChecked aussi normal avec la balise html, de même que (classe => className) et (pour => htmlFor) et ainsi de suite ...
InformationsquelleAutor Yarin Nim

Il ya quelques façons de le faire, en voici un:

Écrit dans ES6:

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

Voici une démonstration en direct sur JSBin.

Ou par le bon vieux JavaScript:

var Checkbox = React.createClass({
  getInitialState: function() {
    return {
      isChecked: true
    };
  },
  toggleChange: function() {
    this.setState({
      isChecked: !this.state.isChecked //flip boolean value
    }, function() {
      console.log(this.state);
    }.bind(this));
  },
  render: function() {
    return (
      <label>
        <input
          type="checkbox"
          checked={this.state.isChecked}
          onChange={this.toggleChange} />
        Check Me!
      </label>
    );
  }
});

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

De nouveau, avec une démonstration en direct sur JSBin.

L'état-complet! Comment sur apatrides approche?

InformationsquelleAutor Jon Saw

9

en plus de la bonne réponse, vous pouvez simplement le faire 😛
```
<input name="remember" type="checkbox" defaultChecked/>
```
- Doit être accepté de répondre, car c'est ce que la plupart des gens seront à la recherche de: une alternative pour le natif HTML checked.
InformationsquelleAutor Fareed Alnamrouti
6

Dans la Réagir rendu du cycle de vie, la valeur de l'attribut sur les éléments de formulaire
remplace la valeur dans les DOM. Avec incontrôlée composant,
souvent, vous voulez Réagir à spécifier la valeur initiale, mais laissez
les mises à jour ultérieures incontrôlée. Pour gérer ce cas, vous pouvez spécifier
une valeur par défaut ou defaultChecked attribut au lieu de la valeur.
```
        <input
          type="checkbox"
          defaultChecked={true}
        />
```
Ou
```
React.createElement('input',{type: 'checkbox', defaultChecked: true});
```
Veuillez checkout plus de détails concernant defaultChecked pour la case ci-dessous:
https://reactjs.org/docs/uncontrolled-components.html#default-values

InformationsquelleAutor Murtaza Hussain

Il travaille

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

Et de la fonction init il

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

InformationsquelleAutor user2061097

2

Vous pouvez passer à "true" ou "" pour la propriété checked d'entrée de case à cocher. Les guillemets vides ("") seront considérés comme des faux et l'article sera désactivée.
```
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>
```
- vérifié, c'est obsolète
- Pouvez-vous fournir de la documentation à fournir plus d'informations sur ce
- Vous ne devriez pas le faire. Si vous passez d'une chaîne à la "checked" de la propriété, vous obtiendrez l'attention: "Warning: Reçu de la chaîne true pour l'attribut booléen checked. Bien que cela fonctionne, il ne fonctionnera pas comme prévu si vous passez la chaîne "false". Vouliez-vous dire vérifié={vrai}?"
InformationsquelleAutor ponteskl

Voici un code que j'ai fait il y a quelques temps, il pourrait être utile.
vous avez à jouer avec cette ligne => ce.etat = { vérifié: false, checked2: 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')
);

CSS

.hidden-check1 {
display: none;  
}
.hidden-check2 {
visibility: hidden;
}

HTML

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

voici la codepen => http://codepen.io/parlop/pen/EKmaWM

Encore un autre... C'est une approche intégrale! Comment sur apatride?
Vert, que voulez-vous dire ?

InformationsquelleAutor Southpaw

-2

 <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(event){
console.log("event",event.target.checked)   }

au-Dessus de la poignée vous donner la valeur true ou false à cocher ou décocher la case

InformationsquelleAutor user2903536

-2

J'définir l'état comme tout[] type. et dans le constructeur de définir l'état à null.

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

Dans l'élément d'entrée

cette.onServiceChange(e)}/>
c'.onServiceChange(e)}/>
c'.onServiceChange(e)}/>
c'.onServiceChange(e)}/>

Je me suis rendu compte après un certain temps. Pensé qu'il pourrait aider à y'all 🙂

InformationsquelleAutor Sachin R

Vous devez vous connecter pour publier un commentaire.