React Native下拉菜单无法打开，如何实现选中值存储？

一、下拉菜单无法展开的原因及修复 #

你的代码里有两个关键问题导致下拉无法正常展开：

1. setOpens方法逻辑错误：当前这个方法只会把open状态设为true，没有处理切换逻辑（点击时应该在展开/收起状态间切换）。DropDownPicker组件需要通过setOpen来触发状态切换，你当前的逻辑无法完成收起操作，甚至会导致组件状态异常。
2. setOpen属性绑定冗余：你用了() => this.setOpens()的写法，直接传this.setOpens即可，额外的箭头函数会导致组件无法正确接收状态切换的回调。

修复方式：
修改setOpens方法为切换状态的逻辑，同时简化setOpen的绑定：

setOpens = () => {
  this.setState(prevState => ({ open: !prevState.open }));
}

然后在DropDownPicker组件中把setOpen={() => this.setOpens()}改成setOpen={this.setOpens}。

二、实现选中值的存储 #

要存储选中值，需要修正以下两点：

1. 初始化正确的状态结构：你初始的language是数组，存储单个选中项用对象更合理，比如直接存选中的label和value，或者一个完整的选项对象。
2. 正确更新状态：React中不能直接修改this.state，必须通过setState方法更新选中值。

完整修正后的代码 #

export default class AddPost extends Component { 
  constructor(props){
    super(props);
    // 初始化状态：存储选中的语言项，以及下拉展开状态
    this.state={
      selectedLanguage: null,
      open: false
    }
  }

  // 切换下拉展开/收起状态
  setOpens = () => {
    this.setState(prevState => ({ open: !prevState.open }));
  }

  render(){
    return(
      <View style={styles.container}>
        <Text style={styles.paragraph}>
          React native dropdown picker
        </Text>
        <DropDownPicker
          items={[
              {label: 'English', value: 'en'},
              {label: 'Deutsch', value: 'de'},
              {label: 'French', value: 'fr'},
          ]}
          open={this.state.open}
          setOpen={this.setOpens}  // 直接绑定切换方法
          defaultIndex={0}
          containerStyle={{height: 40}}
          // 选中项变化时更新状态
          onChangeItem={(item) => {
            this.setState({ selectedLanguage: item });
          }}
        />
      </View>
    );
  }
}

说明 #

• 现在this.state.selectedLanguage会存储当前选中的完整选项对象（包含label和value），你可以根据需要单独存储label或value，比如把状态改成selectedLabel: ''和selectedValue: ''，然后在onChangeItem里分别更新。
• 下拉菜单现在点击会正常切换展开/收起状态，选中选项后状态也会同步更新。

内容的提问来源于stack exchange，提问作者Elly