Wie stelle ich Picker eine Standardoption "Bitte auswählen ..." zur Verfügung?

Question

Ich möchte meinen Picker so einstellen, dass beim Start eine "Standardoption" angezeigt wird. Das heißt: so etwas wie "Bitte wählen Sie eine Option".

Ich habe versucht, eine Option manuell mit dieser Phrase hinzuzufügen, aber auf diese Weise kann die "Standardoption" nach der Auswahl anderer Optionen erneut ausgewählt werden, als wäre es eine der echten Optionen. Es gibt eine Möglichkeit, dies zu tun?

<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> 

Answer 1

Sie können eine Bedingung zu Ihrem handleChangeOption hinzufügen, so dass es nur Zustand gesetzt würde, wenn der Wert nicht 0 (Please select an option... Picker) ist. Etwas wie:

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> 

Answer 2

Hier ist, wie ich es gerade erreicht in React Nativ:

InputPicker Präsentations Komponente:

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 } 

Geordnete Container Ansicht (mit FORMIK Form Handler)

<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> 

Geordnete Containerthis.getCities()

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

Es funktioniert, weil es Wert auf 0 setzt, wenn „Ihre Stadt auswählen“ gerichtet, die ihm einen falsy Wert macht die touched.person_city && errors.person_city auslöst und legt es in ein Fehlerzustand.