React Native Picker Select：如何自动 select 一个项目但仍然能够 select 其他项目？

Question

我在我的 React Native 应用程序中使用 RNPickerSelect。我想要三个选项：A B 和 C。我希望 A 默认为 selected（就像 USA 通常在国家选择器列表中默认为 selected）。这是我的尝试：

<RNPickerSelect
  value={{label: 'A', value: 'A'}}
    items={[
      { label: 'A', value: 'A' },
      { label: 'B', value: 'B' },
      { label: 'C', value: 'C' },
    ]}
  onValueChange={value => {}}
/>

这在默认情况下会 select A，但问题是它不允许您 select 之后的任何其他人。

我该如何处理？

Answer 1

首先制作一个组件状态如

class DropDown extends Component {
   constructor() {
      this.state = {
          dropdownValue: 'A'
      }
   }
   
   handleDropdownChange = (name) => (value) => {
      this.setState({ [name]: value })
   }
   
   render() {
      const { dropdownValue } = this.state  

      return (
         <RNPickerSelect
            value={dropdownValue}
            items={[
              { label: 'A', value: 'A' },
              { label: 'B', value: 'B' },
              { label: 'C', value: 'C' },
            ]}
            onValueChange={this.handleDropdownChange('dropdownValue')}
         />
      )
   }
}

Answer 2

这对我有用：

将属性“pickerProps”添加到具有选项溢出的RNPickerSelect：'hidden'

<RNPickerSelect style={styles.selectContainer}
                ...
                pickerProps={{ style: { height: 214, overflow: 'hidden' } }}
                ...
            />

Answer 3

如果您希望选择器显示第一个选中的项目。您可以简单地将一个空对象传递给占位符。参考这个docs.

<RNPickerSelect
placeholder={{}}
items={[
  { label: 'A', value: 'A' },
  { label: 'B', value: 'B' },
  { label: 'C', value: 'C' },
]}
onValueChange={value => {}}

/>

与此同时，您可以有一个状态变量，其中第一个项目被选中，您可以在 onValueChange

中使用它

例如：

const [selected, setSelected] = useState('A');

<RNPickerSelect 
placeholder={{}}
items={[
{ label: 'A', value: 'A' },
{ label: 'B', value: 'B' },
{ label: 'C', value: 'C' },
]}
 onValueChange={value => setSelected(value)}
/>

注意：您将无法添加任何占位符。不过，您可以在组件上方添加标签 :)

Answer 4

只是想分享一下在设置我的选择器组件时对我有用的东西，运行进入同一个问题。

在下面的示例中，useEffect 将初始选择器值设置为第二个选项。

export default function ContactPicker({ contacts, contact, setContact, setNewState }) {

  useEffect(() => {
    contacts?.length > 1 && setContact(contacts[1]['id'])
  }, [contacts])

  return (
    <View>
      <Picker
        selectedValue={contact}
        onValueChange={(itemValue, itemPosition) => {
          setContact(itemValue)
          setNewState(prev => ({ ...prev, contact_id: itemValue }))
        }}
      >
        {contacts?.map((contact, index) => (
          <Picker.Item
            key={index}
            label={contact.name}
            value={contact.id}
          />
        ))}
      </Picker>
    </View>
  )
}

React Native Picker Select：如何自动 select 一个项目但仍然能够 select 其他项目？

React Native Picker Select: How to auto-select an item but still be able to select others?

picker

reactjs

react-native

react-native-picker-select