如何将 React-Native Picker 的初始值设置为空

Posted 2023-02-25

【中文标题】如何将 React-Native Picker 的初始值设置为空

【英文标题】：how to set inital value of React-Native Picker to empty

【发布时间】：2017-03-16 17:44:41

【问题描述】：

你知道如何将 React-Native Picker 组件的初始值设置为空吗？我的意思是它不应该显示任何选择的项目。

【问题讨论】：

这是不可能的。您可以使用label="" 和空值创建一个附加项目。

@TobiasLins 即使我使用 label="" 创建了一个附加项目，用户也可以选择它，我希望没有初始值，用户也不能重新选择该附加项目并显示类似占位符。

【参考方案1】：

我通过使用value=-1 设置假的不可选择项解决了这个问题。然后当用户选择有效物品时，带有value=-1的假物品消失。

 // this.state.selectedIndex initially setted to -1
    <Picker
        selectedValue=this.state.selectedIndex
        onValueChange=(value, index) =>  this.setState(selectedIndex: index) 
    
    >
        // first fake item
        if(Platform.OS === 'android' && this.state.selectedIndex === -1) 
            <Picker.Item label='CANCEL' value=-1 />
        

        <Picker.Item label='First' value=1 />
        <Picker.Item label='Second' value=2 />
        <Picker.Item label='Third' value=3 />
    </Picker>

【参考方案2】：

我认为您需要的部分是enabled=false。

https://github.com/react-native-picker/picker#enabled-1

      <Picker
        selectedValue=selected
        onValueChange=(itemValue, itemIndex) => setSelected(itemValue)>

        <Picker.Item key='' label='-- Select a Item --' value=null enabled=false />

        items.map(i => <Picker.Item key=i.key label=i.label value=i.value />)

      </Picker>

【参考方案3】：

你可以这样做

        <Picker
          selectedValue=selected
          onValueChange=itemValue => setSelected(itemValue)
        >
          items &&
            items.map((element, index) => 
              if (index === 0) 
                return (
                  <Picker.Item
                    key=element.value
                    label=element.label
                    value=element.value
                    enabled=false
                  />
                );
              
              return (
                <Picker.Item
                  key=element.value
                  label=element.label
                  value=element.value
                />
              );
            )
        </Picker>