Le composant <Select> est une variante du composant <Dropdown> , particulièrement destiné à être utilisé dans les composants de formulaire. Les principales différences sont :
- Il ne peut fonctionner qu'en mode déclaratif, c'est-à-dire qu'il ne peut pas être virtualisé en passant une fonction enfant.
- Chaque
<SelectItem>accepte un accessoirevalue, qui sera comparé auvaluepassé à<Select>, et la bonne option sera sélectionnée. Contrairement à un élément DOM<SELECT>traditionnel, toute référence peut être utilisée comme valeur, à la fois primitive et objet. - Les articles n'acceptent pas de
onClick. Au lieu de cela, vous obtiendrez la valeur de l'option sélectionnée en la recevant d'une méthodeonChange.
Le composant est toujours contrôlé, ce qui signifie que vous devez mettre à jour son value à partir d'un rappel onChange pour qu'il reflète la propriété nouvellement sélectionnée.
Usage
import { Select } from 'nr1'Exemples
Basique
<Select onChange={(evt, value) => alert(value)}> <SelectItem value="a">Value is "a"</SelectItem> <SelectItem value="b">Value is "b"</SelectItem> <SelectItem value="c">Value is "c"</SelectItem></Select>Avec étiquette et informations
<Select label="Items" info="Info value" onChange={(evt, value) => alert(value)}> <SelectItem value="a">Value is "a"</SelectItem> <SelectItem value="b">Value is "b"</SelectItem> <SelectItem value="c">Value is "c"</SelectItem></Select>Avec étiquette en ligne
<Select label="Items" labelInline onChange={(evt, value) => alert(value)}> <SelectItem value="a">Value is "a"</SelectItem> <SelectItem value="b">Value is "b"</SelectItem> <SelectItem value="c">Value is "c"</SelectItem></Select>Avec description
<Select description="Description value" onChange={(evt, value) => alert(value)}> <SelectItem value="a">Value is "a"</SelectItem> <SelectItem value="b">Value is "b"</SelectItem> <SelectItem value="c">Value is "c"</SelectItem></Select>Avec un message invalide
<Select invalid="Invalid message value" onChange={(evt, value) => alert(value)}> <SelectItem value="a">Value is "a"</SelectItem> <SelectItem value="b">Value is "b"</SelectItem> <SelectItem value="c">Value is "c"</SelectItem></Select>Composant contrôlé
class ControlledSelect extends React.Component { constructor() { super(...arguments);
this.state = { value: null, };
this._onChange = this._onChange.bind(this); }
_onChange(event, value) { this.setState({ value }); }
render() { return ( <Select onChange={this._onChange} value={this.state.value}> <SelectItem value="1">Item 1</SelectItem> <SelectItem value="2">Item 2</SelectItem> <SelectItem value="3">Item 3</SelectItem> </Select> ); }}Accessoires
chaîne | Fournissez une étiquette descriptive pour ce contrôle, par exemple "Comptes". |
OBLIGATOIREnœud | Liste d'options exprimées sous la forme d'un ensemble de |
chaîne | Ajoute les noms de classe au composant. |
chaîne | Message avec des instructions sur la façon de remplir le champ du formulaire. |
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. |
booléen | Affichez l'étiquette en ligne dans le contrôle de formulaire. À utiliser uniquement lorsque le composant n'est pas à l'intérieur d'un |
fonction | Rappel déclenché à chaque fois que la valeur de la sélection est modifiée. Vous pouvez récupérer la valeur en tant que deuxième argument de l'événement function ( |
booléen | Si |
é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 |
n'importe lequel | Valeur correspondant à l'élément sélectionné. |