React Native：无法从Modal内部更新父组件状态问题

你遇到的核心问题是：点击TextInput后Modal未正确触发显示，选中选项后TextInput的值未同步更新。以下是具体问题点和修复方案：

问题1：Modal未正确唤起 #

父组件中Modal的显示依赖自身的isModalOpened状态，但TouchableOpacity的onPress事件里仅调用了props.setModalOpened?.(true)，未更新自身的isModalOpened状态，导致Modal无法渲染。

问题2：选中值未同步到上层组件 #

父组件的TextInput绑定了自身的selectedItem状态，但选中选项后未调用props.onChangeText同步到上层组件，可能导致上层状态不同步。

问题3：Modal组件标题未正确显示 #

Modal组件中使用了未定义的selectedItem变量，应该使用传入的props.title。

修改后的父组件代码（BPCreateInput.tsx） #

import {
  StyleSheet,
  Text,
  View,
  TouchableOpacity,
  SafeAreaView,
} from "react-native";
import React, { useState, useEffect } from "react";

import { TextInput } from "react-native-paper";
import BPSelectionModal from "./BPSelectionModal";

type Props = {
  capitalize: "none" | "sentences" | "words" | "characters" | undefined;
  label: string;
  length: number | undefined;
  style: object | undefined;
  onChangeText(e: any): void | undefined;
  inputValue: string | undefined;
  isSelectable: boolean | undefined;
  isPressed?: (x: boolean) => void;
  country?: string;
  dataURL?: string;
  setDataURL?: (x: string | undefined) => void;
  postKey?: (a: string) => void;
  disabled?: boolean;
  keyboard?: any;
  isDate?: boolean;
  setModalOpened?: (x: boolean) => void;
  isModalOpened?: boolean;
  setTitle?: (x: string) => void;
};

const BPCreateInput = (props: Props) => {
  const [isModalOpened, setModalOpened] = useState<boolean>(false);
  const [selectedItem, setSelectedItem] = useState<string>();

  return (
    <View style={{ flexDirection: "row", width: "100%", alignContent: "center", justifyContent: "center" }}>
      <TouchableOpacity
        onPress={() =>
          props.isSelectable
            ? (
                props.setDataURL?.(props.dataURL),
                props.setModalOpened?.(true),
                props.isPressed?.(true),
                props.setTitle?.(props.label),
                setModalOpened(true), // 更新自身Modal状态，确保Modal渲染
                console.log("isPressed: ", props.isModalOpened)
              )
            : null
        }
        style={{ zIndex: 10, marginHorizontal: 8, width: "100%" }}
      >
        <TextInput
          pointerEvents={props.isSelectable ? "none" : "auto"}
          autoCapitalize={props.capitalize}
          label={props.label}
          mode="outlined"
          maxLength={props.length}
          activeOutlineColor="#0C7ECF"
          style={props.style}
          onChangeText={props.onChangeText}
          value={selectedItem}
          disabled={props.disabled}
          keyboardType={props.keyboard}
        />
      </TouchableOpacity>
      {isModalOpened ? (
        <BPSelectionModal
          isOpened={isModalOpened}
          setOpened={(x) => setModalOpened(x)}
          dataURL={props.dataURL}
          title={props.label}
          setSelectedText={(a) => {
            setSelectedItem(a);
            props.onChangeText?.(a); // 同步选中值到上层组件
            console.log("a: ", a);
          }}
          postKey={(a) => props.postKey?.(a)}
          country={props.country}
          isDate={props.isDate}
        />
      ) : null}
    </View>
  );
};

export default BPCreateInput;

修改后的Modal组件代码（BPSelectionModal.tsx） #

import {
  StyleSheet,
  Text,
  View,
  FlatList,
  Platform,
  Alert,
  TouchableOpacity,
  Dimensions,
} from "react-native";
import React, { useState, useEffect, useCallback } from "react";

import { REACT_APP_IOS_URL_API, ANDROID_URL_API } from "@env";
let baseURL =
  Platform.OS === "android" ? ANDROID_URL_API : REACT_APP_IOS_URL_API;

import Modal from "react-native-modal";

type Props = {
  isOpened: boolean | undefined;
  setOpened: (x: boolean) => void;
  dataURL: string | undefined;
  setSelectedText: (x: string) => void;
  title: string | undefined;
  postKey: (x: string) => void;
  country?: string;
  isDate?: boolean;
};

interface DataItem {
  key: string;
  text: string;
}

const BPSelectionModal = (props: Props) => {
  const data = Array.from({ length: 3 }, (_, i) => `选项${i + 1}`); // 替换为真实数据，这里用3个选项做示例

  return (
    <Modal
      isVisible={props.isOpened}
      style={data.length > 3 ? styles.modalStyleLong : styles.modalStyleShort}
      onBackdropPress={() => props.setOpened(false)}
    >
      <View
        style={{
          flex: 0,
          backgroundColor: 'white',
          padding: 22,
          justifyContent: 'center',
          alignItems: 'center',
          borderRadius: 4,
          borderColor: 'rgba(0, 0, 0, 0.1)',
        }}
      >
        <Text style={styles.titleStyle}>{props.title}</Text> {/* 使用props.title显示标题 */}
        <FlatList
          data={data}
          renderItem={({ item }) => (
            <TouchableOpacity
              style={styles.btnStyle}
              onPress={() => {
                console.log("item: ", item);
                props.setSelectedText(item);
                props.setOpened(false);
              }}
            >
              <Text style={styles.txtStyle}>{item}</Text>
            </TouchableOpacity>
          )}
        />
      </View>
    </Modal>
  );
};

// 补充样式定义（原代码缺失，这里补全基础样式）
const styles = StyleSheet.create({
  modalStyleLong: {
    margin: 0,
    justifyContent: 'center',
  },
  modalStyleShort: {
    margin: 0,
    justifyContent: 'center',
  },
  titleStyle: {
    fontSize: 18,
    fontWeight: 'bold',
    marginBottom: 16,
  },
  btnStyle: {
    paddingVertical: 12,
    paddingHorizontal: 24,
    borderBottomWidth: 1,
    borderBottomColor: '#eee',
    width: '100%',
    alignItems: 'center',
  },
  txtStyle: {
    fontSize: 16,
  },
});

export default BPSelectionModal;

关键修复点总结 #

1. 父组件TouchableOpacity的onPress中新增setModalOpened(true)，确保自身isModalOpened状态更新，Modal正常渲染。
2. 父组件的setSelectedText回调中新增props.onChangeText?.(a)，将选中值同步到上层组件。
3. Modal组件中把标题的selectedItem改为props.title，修复未定义变量问题。
4. 补充Modal组件的样式定义，确保UI正常显示。

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