如何为 Picker 提供默认的 "Please select..." 选项?
How to provide Picker a default "Please select..." option?
我想让我的选择器在启动时显示 "default option"。这意味着:类似于 "Please select an option".
我尝试用这个短语手动添加一个选项,但是,这样 "default option" 可以在选择其他选项后重新选择,就像它是真实选项之一一样。有什么方法可以做到这一点?
<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>
您可以向 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>
这是我刚刚在 React Native 中实现它的方法:
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 }
父容器视图(使用 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
}
之所以有效,是因为如果选择了 "Select your city",它会将值设置为 0,这使其成为触发 touched.person_city && errors.person_city
并将其置于错误状态的虚假值。
只是在默认中class尝试添加您想要显示的默认值。
示例:
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>
我想让我的选择器在启动时显示 "default option"。这意味着:类似于 "Please select an option".
我尝试用这个短语手动添加一个选项,但是,这样 "default option" 可以在选择其他选项后重新选择,就像它是真实选项之一一样。有什么方法可以做到这一点?
<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>
您可以向 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>
这是我刚刚在 React Native 中实现它的方法:
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 }
父容器视图(使用 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
}
之所以有效,是因为如果选择了 "Select your city",它会将值设置为 0,这使其成为触发 touched.person_city && errors.person_city
并将其置于错误状态的虚假值。
只是在默认中class尝试添加您想要显示的默认值。
示例:
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>