web-dev-qa-db-fra.com

Comment fournir à Picker une option par défaut "Veuillez sélectionner ..."?

Je voudrais que mon sélecteur affiche une "option par défaut" au démarrage. Cela signifie: quelque chose comme "Veuillez sélectionner une option".

J'ai essayé d'ajouter une option manuellement avec cette phrase, mais, de cette façon, "l'option par défaut" peut être re-sélectionnée après avoir sélectionné d'autres options, comme si c'était l'une des vraies options. Il existe un moyen de le faire?

<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>
reactjsreact-nativereact-native-android
10
Luiz

Vous pouvez ajouter un conditionnel à votre handleChangeOption afin qu'il ne définisse l'état que lorsque la valeur n'est pas 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>
18
Yo Wakita

Voici comment je l'ai réalisé en React Native:

Composant de présentation InputPicker:

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 }

Vue du conteneur parent (en utilisant le gestionnaire de formulaire Formik)

<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 this.getCities () 

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

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

8
agm1984

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

exemple:

this.state = {

        type: "House",

    };

dans ton vagabond

<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>
0
Majdi Ajroud