React Native Material Dropdown：如何处理下拉菜单的onPress事件？

首先咱们把逻辑理清楚：要实现点击不同下拉选项调用对应API，核心是让每个下拉选项和对应的API信息绑定起来，这样点击时就能精准触发目标接口。下面一步步给你拆解实现步骤：

1. 调整下拉选项的数据结构 #

你现在从MyURL获取的result数组，需要给每个元素添加上对应的API地址（或者一个能区分API的唯一标识）。如果接口返回的原始数据里没有这个信息，就手动在处理数据时补上，比如：

api.get('MyURL')
  .then((response)=> {
    var jsonResult = JSON.parse(response.data)
    var result = jsonResult.reduce((r,o)=> r.concat(...Object.values(o)),[])
    // 给每个下拉选项绑定对应的API路径，这里假设用item的id拼接API地址
    const menuItems = result.map(item => ({
      ...item,
      targetApi: `/api/resource/${item.id}` // 根据你的实际API规则调整
    }))
    this.setState({data: menuItems})
  })
  .catch((err)=>{
    console.log("axios cathing error")
    Alert.alert("failed", "Retry to retrie...")
  })

2. 编写点击事件处理函数 #

接下来写一个专门处理下拉选项点击的函数，接收选中的选项作为参数，然后根据里面的targetApi调用对应接口：

handleMenuPress = (selectedItem) => {
  // 可选：添加加载状态，防止重复点击
  this.setState({isLoading: true})
  
  api.get(selectedItem.targetApi)
    .then((response) => {
      // 处理API返回的数据，比如更新页面状态、展示内容等
      const responseData = JSON.parse(response.data)
      this.setState({
        currentResult: responseData,
        isLoading: false
      })
      // 这里可以根据需求添加成功提示
    })
    .catch((err) => {
      console.error("API调用失败", err)
      Alert.alert("Error", "Failed to fetch data, please try again.")
      this.setState({isLoading: false})
    })
}

3. 给下拉菜单绑定点击事件 #

最后在渲染下拉菜单的时候，把每个选项的点击事件绑定到上面的处理函数，传递当前选中的item：

如果你用的是React Native的Picker组件： #

<Picker
  selectedValue={this.state.selectedValue}
  onValueChange={(itemValue, itemIndex) => {
    // 通过索引拿到对应的完整item对象
    const selectedItem = this.state.data[itemIndex]
    this.handleMenuPress(selectedItem)
    this.setState({selectedValue: itemValue})
  }}
>
  {this.state.data.map((item, index) => (
    <Picker.Item
      key={index}
      label={item.label} // 下拉选项显示的文本
      value={item.value} // 选项对应的值
    />
  ))}
</Picker>

如果你用的是自定义下拉菜单（比如用TouchableOpacity渲染选项）： #

<View style={/* 下拉容器样式 */}>
  {this.state.data.map((item, index) => (
    <TouchableOpacity
      key={index}
      onPress={() => this.handleMenuPress(item)}
      style={/* 选项样式 */}
    >
      <Text>{item.label}</Text>
    </TouchableOpacity>
  ))}
</View>

额外提醒 #

• 注意：componentWillMount已经被React官方标记为过时方法，建议换成componentDidMount来初始化下拉菜单数据，避免潜在的渲染问题。
• 如果你的项目已经使用React Hooks，那可以用useEffect替代生命周期函数，逻辑会更简洁。
• 记得处理加载状态（比如显示loading图标）和错误提示，提升用户体验。

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