如何为选取器提供默认"Please select..."选项？

Question

我想让我的选取器在启动时显示"默认选项"。这意味着：类似于"请选择一个选项"。

我尝试使用此短语手动添加一个选项，但是，这样就可以在选择其他选项后重新选择"默认选项"，就像它是真正的选项之一一样。有没有办法做到这一点？

<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

您可以向 handleChangeOption 添加一个条件，以便它仅在值不为 0 时设置状态(Please select an option...选取器(。像这样：

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

以下是我在 React Native 中实现它的方式：

输入选取器表示组件：

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 }

父容器视图(使用 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>

父容器this.getCities((

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

它之所以有效，是因为如果选择"选择您的城市"，它将值设置为 0，这使其成为触发touched.person_city && errors.person_city并将其置于错误状态的虚假值。

Answer 3

仅在默认类中尝试添加要显示的默认值。

例：

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

在渲染中：

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

Answer 4

添加到Yo Wakita的答案中，您可以enabled={false}这样设置用户将占位符选项设置为禁用。

   <Picker.Item label='Please select an option...' value='0' enabled={false}/>