Comment définir les valeurs par défaut Checked in ReactJS?
Je ne parviens pas à mettre à jour l'état de la case à cocher après l'attribution de la valeur par défaut "check" à "vérifié" dans React.
var rCheck = React.createElement('input',
{type: 'checkbox', checked:'checked', value: true},
'Check here');
Après avoir affecté checked="checked", je ne peux pas interagir avec l'état de la case en cliquant pour décocher/cocher.
Si la case à cocher est créée uniquement avec React.createElement, la propriété defaultChecked est utilisée.
React.createElement('input',{type: 'checkbox', defaultChecked: false});
Merci à @nash_ag
Pour interagir avec la boîte, vous devez mettre à jour l'état de la case une fois que vous l'avez modifiée. 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} />
Il y a plusieurs façons d'y parvenir, en voici une:
Écrit en 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émo live sur JSBin .
Ou avec un vieux JavaScript simple:
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'));
Encore une fois, avec une démonstration en direct sur JSBin .
en plus de la bonne réponse, vous pouvez simplement faire: P
<input name="remember" type="checkbox" defaultChecked/>
Ça marche
<input type="checkbox" value={props.key} defaultChecked={props.checked} ref={props.key} onChange={this.checkboxHandler} />
Et la fonction l'init
{this.viewCheckbox({ key: 'yourKey', text: 'yourText', checked: this.state.yourKey })}
Dans le cycle de vie du rendu React, l'attribut value des éléments de formulaire remplacera la valeur du DOM. Avec un composant non contrôlé, vous souhaitez souvent que React spécifie la valeur initiale, tout en laissant les mises à jour ultérieures non contrôlées. Pour gérer ce cas, vous pouvez spécifier un attribut defaultValue ou defaultChecked au lieu de valeur.
<input
type="checkbox"
defaultChecked={true}
/>
Ou
React.createElement('input',{type: 'checkbox', defaultChecked: true});
Veuillez vérifier plus de détails concernant defaultChecked pour la case à cocher ci-dessous: https://reactjs.org/docs/uncontrolled-components.html#default-values
Voici un code que j'ai créé il y a quelque temps, il pourrait être utile ... vous devez jouer avec cette ligne => this.state = {vérifié: faux, vérifié2: vrai};
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 le code => http://codepen.io/parlop/pen/EKmaWM
Ne faites pas trop difficile. Commençons par comprendre un exemple simple donné ci-dessous. Ce sera clair pour vous. Dans ce cas, juste après avoir appuyé sur la case à cocher, nous allons saisir la valeur de l'état (initialement, elle est fausse), la remplacer par une autre valeur (initialement, elle est vraie) et définir l'état en conséquence. Si la case est cochée pour la deuxième fois, le processus sera répété. Saisir la valeur (maintenant c'est vrai), changez-le (en faux) & définissez ensuite l'état en conséquence (maintenant c'est faux encore. Le code est partagé ci-dessous.
Partie 1
state = {
verified: false
} // The verified state is now false
Partie 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
});
};
Partie 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>
Vous pouvez passer "true" ou "" à la case cochée de la propriété cochée. Les guillemets vides ("") seront compris comme faux et l'élément sera décoché.
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>