如何从React Native子组件获取下拉菜单选中值？

我来帮你搞定这个问题！核心思路是通过回调函数实现子组件（Confirm.js）向父组件（MainActivity.js）传递数据，这是React生态里组件通信的经典方案，具体步骤如下：

1. 在Confirm.js中维护选中状态并触发父组件回调 #

首先，你需要在Confirm组件内部维护下拉菜单选中的城市状态，然后在用户点击Yes按钮时，通过父组件传入的回调函数把enCity传出去：

// Confirm.js
import React, { Component } from 'react';
import { Modal, View, Button, Alert } from 'react-native';
import DropDownMenu from './DropDownMenu'; // 适配你的下拉组件路径

class Confirm extends Component {
  constructor(props) {
    super(props);
    this.state = {
      selectedCity: null, // 存储选中的完整城市对象
      // 其他组件状态...
    };
  }

  // 处理下拉菜单选中事件，更新本地状态
  handleCitySelect = (selectedOption) => {
    this.setState({ selectedCity: selectedOption });
  };

  // 点击Yes按钮时触发父组件回调
  handleYesPress = () => {
    const { selectedCity } = this.state;
    if (!selectedCity) {
      Alert.alert('提示', '请先选择城市');
      return;
    }
    // 通过父组件传入的回调，把enCity传递出去
    this.props.onConfirm(selectedCity.enCity);
    // 关闭弹窗（如果需要的话）
    this.props.onCloseModal();
  };

  render() {
    return (
      <Modal visible={this.props.isVisible} animationType="slide">
        <View style={{ padding: 20 }}>
          {/* 第一个下拉菜单，绑定选中事件 */}
          <DropDownMenu
            onOptionSelected={this.handleCitySelect}
            // 其他下拉属性（比如选项列表、默认提示等）
          />
          {/* 第二个下拉菜单（如果需要单独处理，同理添加状态和选中逻辑） */}
          <DropDownMenu
            // 第二个下拉的配置...
          />
          <View style={{ flexDirection: 'row', gap: 10, marginTop: 30 }}>
            <Button title="Yes" onPress={this.handleYesPress} />
            <Button title="No" onPress={this.props.onCloseModal} />
          </View>
        </View>
      </Modal>
    );
  }
}

export default Confirm;

2. 在MainActivity.js中接收传递过来的enCity #

接下来，在父组件MainActivity里使用Confirm组件时，传入onConfirm回调函数，就能拿到子组件传过来的enCity值了：

// MainActivity.js
import React, { Component } from 'react';
import { View, Button, Text } from 'react-native';
import Confirm from './Confirm';

class MainActivity extends Component {
  constructor(props) {
    super(props);
    this.state = {
      confirmModalVisible: false,
      selectedEnCity: '', // 存储从Confirm拿到的enCity值
    };
  }

  // 打开确认弹窗
  showConfirm = () => {
    this.setState({ confirmModalVisible: true });
  };

  // 关闭确认弹窗
  hideConfirm = () => {
    this.setState({ confirmModalVisible: false });
  };

  // 接收Confirm传递过来的enCity
  handleConfirmResult = (enCity) => {
    console.log('选中的英文城市：', enCity);
    this.setState({ selectedEnCity: enCity });
    // 这里可以添加你的后续逻辑，比如提交表单、请求接口等
  };

  render() {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Button title="打开城市选择弹窗" onPress={this.showConfirm} />
        {this.state.selectedEnCity && (
          <Text style={{ marginTop: 20 }}>选中的英文城市：{this.state.selectedEnCity}</Text>
        )}
        <Confirm
          isVisible={this.state.confirmModalVisible}
          onCloseModal={this.hideConfirm}
          onConfirm={this.handleConfirmResult} // 传入回调接收enCity
        />
      </View>
    );
  }
}

export default MainActivity;

关键说明 #

• 我们在Confirm组件里用state保存了完整的城市选中对象，确保点击Yes时能直接提取enCity字段。
• 通过this.props.onConfirm传递值是React父子组件通信最直接的方式，不需要依赖复杂的状态管理库就能快速实现需求。
• 额外添加了空值判断，避免用户未选择城市就点击Yes导致的报错，同时给出友好提示。

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