如何将反应原生选择器的初始值设置为空

Question

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

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

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

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