Comment fournir un Sélecteur par défaut “s'il vous Plaît sélectionner...”?

Je voudrais faire mon Sélecteur de faire preuve d'un "choix par défaut" au démarrage. Que signifie: quelque chose comme "s'il vous Plaît sélectionnez une option".

J'ai essayé d'ajouter une option manuellement avec cette phrase, mais, de cette façon, le "choix par défaut" peut être sélectionnée de nouveau après la sélection d'autres options, comme elle a été l'une des options réelles. Il est possible de faire cela?

<View style={Styles.row}>
            <Picker
                selectedValue={this.state.initialOption}
                onValueChange={this.handleChangeOption}
                prompt='Options'}
              >
              <Picker.Item label='Please select an option...' value='0' />
              <Picker.Item label='option 1' value='1' />
              <Picker.Item label='option 2' value='2' />
            </Picker>
</View>

OriginalL'auteur Luiz | 2017-02-10

13

Vous pouvez ajouter une condition à votre handleChangeOption de sorte qu'il ne serait d'ensemble de l'état lorsque la valeur est différente de 0 (le Please select an option... Sélecteur). Quelque chose comme:
```
handleChangeOption(val) {
  if (val !== 0) {
    this.setState({selectedValue: val});
  }
}

...


<View style={Styles.row}>
            <Picker
                selectedValue={this.state.selectedValue}
                onValueChange={this.handleChangeOption}
                prompt='Options'}
              >
              <Picker.Item label='Please select an option...' value='0' />
              <Picker.Item label='option 1' value='1' />
              <Picker.Item label='option 2' value='2' />
            </Picker>
</View>
```
De cette façon, lors de la première appuyez sur le Sélecteur, "Veuillez sélectionner l'option" semble comme si c'était une option utilisable. Je voudrais faire apparaître juste avant que l'utilisateur de la presse. Comme un titre, pas une option.
J'ai mis à jour ma réponse. Je pense que vous êtes à la recherche à ne pas changer d'état lorsque le 'Veuillez sélectionner une option de sélection est choisie.
Merci. Semble réagir indigènes ne pas fournir exactement la fonctionnalité, qui ne serait même pas montrer "s'il vous Plaît sélectionner l'option" lorsque l'utilisateur affiche le Sélecteur. Mais votre solution de help me pour contourner ce problème.

OriginalL'auteur Yo Wakita

Ici est de savoir comment je vient de réaliser dans de Réagir Natif:

InputPicker De Présentation De La Composante:

import React from 'react'
import { StyleSheet, View, Text, Picker } from 'react-native'
const InputPicker = ({
style,
hasError,
title,
enabled,
selectedValue,
onValueChange,
items,
firstItem
}) => {
if (!items || !Array.isArray(items)) return null
const { container, errorContainer, errorText, pickerTitle, pickerItem } = styles
return (
<View style={[container, (hasError) ? errorContainer : null, style]}>
<Text style={[pickerTitle, (hasError) ? errorText : null]}>
{title}
</Text>
<Picker
style={[pickerItem, (hasError) ? errorText : null]}
selectedValue={selectedValue}
onValueChange={onValueChange}
enabled={enabled}>
<Picker.Item key={'unselectable'} label={firstItem} value={0} />
{items.map((c) => <Picker.Item key={c.id} label={c.label} value={c.label} />)}
</Picker>
</View>
)
}
const styles = StyleSheet.create({
container: {
flex: 0,
flexDirection: 'row',
alignItems: 'center'
},
pickerTitle: {
flex: 1,
textAlign: 'right'
},
pickerItem: {
flex: 2
},
errorContainer: {
backgroundColor: '#F8DEE0',
borderColor: '#DD0426',
borderWidth: 1
},
errorText: {
color: '#DD0426'
}
})
export { InputPicker }

Conteneur Parent Vue (à l'aide de Formik gestionnaire de formulaire)

<CardSection style={{ flex: 0, alignItems: 'center' }}>
<InputPicker
title="City"
enabled
hasError={touched.person_city && errors.person_city}
selectedValue={this.props.person_city}
onValueChange={(value) => {
this.props.setFieldValue('person_city', value)
this.props.updateField({ prop: 'person_city', value })
}}
items={this.getCities()}
firstItem="Select your city"
/>
</CardSection>

Conteneur Parent .getCities()

getCities() {
const cities = [
{ id: 0, label: 'Nanaimo' },
{ id: 1, label: 'Victoria' },
{ id: 2, label: 'Ladysmith' }
]
return cities
}

Cela fonctionne, car il fixe la valeur à 0 si "Sélectionnez votre ville" est choisi, ce qui en fait un falsy valeur qui déclenche touched.person_city && errors.person_city et le met dans un état d'erreur.

OriginalL'auteur agm1984

juste dans la classe par défaut essayez d'ajouter de la valeur par défaut que vous voulez afficher .

exemple :

this.state = {
type: "House",
};

dans votre rander

<Picker
selectedValue={this.state.type}
>
<Picker.Item label="House" value="House" />
<Picker.Item label="Apartment" value="Apartment" />
<Picker.Item label="Comercial Space" value="Comercial Space" />
</Picker>

OriginalL'auteur Majdi Ajroud

Vous devez vous connecter pour publier un commentaire.