Lorsqu'un utilisateur choisit une ou plusieurs options proposées
L'état de la case à cocher peut être contrôlé via les propriétés checked et indeterminate. Si aucun de ces éléments n'est fourni, la case à cocher gérera son propre état.
Vous pouvez écouter les changements d'état de la case à cocher via la propriété onChange.
Remarque: le paramètre checked remplacera defaultChecked car il place le composant dans un état contrôlé. defaultChecked ne doit être utilisé que pour les cases à cocher non contrôlées.
Usage
import { Checkbox } from 'nr1'Exemples
Basique
<div className="nr1-Docs-prettify"> <Checkbox onChange={(event) => alert('Foo')} label="Foo" /> <Checkbox indeterminate label="Bar" /> <Checkbox checked disabled label="Baz" /></div>Avec info
<Checkbox onChange={(event) => alert('Foo')} info="Info value" label="Foo" />Avec description
<Checkbox onChange={(event) => alert('Foo')} description="Description value" label="Foo"/>Avec un message invalide
<Checkbox onChange={(event) => alert('Foo')} invalid="Invalid message value" label="Foo"/>Composant contrôlé
class MyNerdlet extends React.PureComponent { constructor(props) { super(props);
this.state = { isChecked: false, };
this.onChange = this.onChange.bind(this); }
onChange(event) { console.log(event); const isChecked = event.target.checked;
this.setState({ isChecked }); }
render() { return ( <Checkbox checked={this.state.isChecked} onChange={this.onChange} label="Foo" /> ); }}Accessoires
booléen | Si |
chaîne | Ajoute les noms de classe au composant. Doit être utilisé uniquement à des fins de positionnement et d'espacement. |
booléen | Si |
chaîne | Message avec des instructions sur la façon de remplir le champ du formulaire. |
booléen | Si |
booléen | Si |
chaîne | Des informations supplémentaires peuvent être affichées dans une info-bulle à côté de l'étiquette. |
booléen|chaîne | Lorsque cette option est vraie, elle définit le champ dans un état non valide, afin d'avertir l'utilisateur qu'une attention particulière est nécessaire sur ce champ particulier. Cette propriété peut être un champ |
chaîne | Texte à afficher comme étiquette. |
fonction | Rappel déclenché à chaque fois que l'état sélectionné de la case à cocher change. The event source of the callback. You can access the new value with |
énumération[] | Propriété d'espacement. L'espacement est défini comme un uplet de zéro à quatre valeurs, qui suivent les mêmes conventions que les propriétés CSS comme <Array of |
objet | Style en ligne pour un style personnalisé. Doit être utilisé uniquement à des fins de positionnement et d'espacement. |
chaîne | Ajoute un attribut |
chaîne | La valeur du composant. Cela va dans l'entrée de la case à cocher interne, pas dans le composant lui-même, et est renvoyé dans le cadre de l'élément cible de l'événement |