React Native：TextInput获焦显示DateTimePicker的状态冗余问题

嘿，我明白你的困扰——不想在父组件重复维护Picker的显隐状态，毕竟CustomDateTimePicker自己已经有一套状态逻辑了对吧？别担心，咱们可以通过两种方式解决这个冗余问题，我给你详细说说：

方案一：将CustomDateTimePicker改为受控组件（推荐） #

这种方式遵循React的单向数据流原则，把Picker的显隐状态和日期值移到父组件AddMeetingScreen中管理，子组件只负责渲染和触发回调，彻底消除状态冗余。

步骤1：修改CustomDateTimePicker组件 #

移除内部的isPickerVisible和chosenDate状态，改为接收父组件传递的props：

import React from "react";
import { View } from "react-native";
import DateTimePickerModal from "react-native-modal-datetime-picker";

const CustomDateTimePicker = ({ isVisible, onClose, onConfirm }) => {
  return (
    <View>
      <DateTimePickerModal
        isVisible={isVisible}
        mode="datetime"
        onConfirm={onConfirm}
        onCancel={onClose}
      />
    </View>
  );
};

export default CustomDateTimePicker;

步骤2：修改AddMeetingScreen组件 #

在父组件中维护显隐状态和日期值，通过TextInput的onFocus控制Picker显示，同时处理日期选择后的逻辑：

import React, { useState } from "react";
import { SafeAreaView, View, TouchableOpacity, Text, Icon } from "react-native";
import CustomDateTimePicker from './CustomDateTimePicker';
import MinimalTextInput from './MinimalTextInput'; // 导入你的输入组件

const AddMeetingScreen = ({ navigation }) => {
  // 父组件维护Picker的显隐状态和选中的日期
  const [isPickerVisible, setIsPickerVisible] = useState(false);
  const [chosenDate, setChosenDate] = useState("");

  const _popAddMeeting = () => {
    navigation.pop();
  };

  // 显示Picker
  const _showPicker = () => {
    setIsPickerVisible(true);
  };

  // 隐藏Picker
  const _hidePicker = () => {
    setIsPickerVisible(false);
  };

  // 处理日期确认
  const _handleDateConfirm = (date) => {
    // 把日期转为你需要的格式，比如本地化字符串
    setChosenDate(date.toLocaleString());
    console.warn("A date has been picked: ", date);
    _hidePicker();
  };

  return (
    <>
      <SafeAreaView style={styles.addMeetingContainer}>
        <View style={styles.headerContainer}>
          <TouchableOpacity onPress={_popAddMeeting} style={styles.backButtonTouchable}>
            <Icon name="arrow-back-outline" size={28} color="#000" />
          </TouchableOpacity>
          <View style={{ position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, justifyContent: 'center', alignItems: 'center' }}>
            <Text style={styles.title}> New Meeting </Text>
          </View>
        </View>
        <View style={{ marginTop: 32 }}>
          <MinimalTextInput 
            title="When" 
            placeholder="Select date & time" 
            value={chosenDate} // 把选中的日期显示在输入框
            onFocus={_showPicker} 
          />
        </View>
        {/* 由父组件状态控制Picker的显隐 */}
        <CustomDateTimePicker 
          isVisible={isPickerVisible}
          onClose={_hidePicker}
          onConfirm={_handleDateConfirm}
        />
      </SafeAreaView>
    </>
  );
};

// 你的样式定义
const styles = {
  addMeetingContainer: {
    flex: 1,
    backgroundColor: '#fff'
  },
  headerContainer: {
    flexDirection: 'row',
    padding: 16,
    alignItems: 'center'
  },
  backButtonTouchable: {
    padding: 8
  },
  title: {
    fontSize: 20,
    fontWeight: 'bold'
  }
};

export default AddMeetingScreen;

方案二：通过Ref调用Picker内部方法（可选） #

如果你不想把Picker的状态移到父组件，可以用forwardRef和useImperativeHandle让子组件暴露showPicker和hidePicker方法，父组件通过Ref直接调用，这样既保留子组件的内部状态，又能从外部控制显隐。

步骤1：修改CustomDateTimePicker组件 #

使用forwardRef包裹组件，并用useImperativeHandle暴露控制方法：

import React, { useState, useImperativeHandle, forwardRef } from "react";
import { View } from "react-native";
import DateTimePickerModal from "react-native-modal-datetime-picker";

const CustomDateTimePicker = forwardRef((props, ref) => {
  const [isPickerVisible, setPickerVisibility] = useState(false);
  const [chosenDate, setChosenDate] = useState("");

  const showPicker = () => {
    setPickerVisibility(true);
  };

  const hidePicker = () => {
    setPickerVisibility(false);
  };

  const handleConfirm = (date) => {
    setChosenDate(date);
    // 通知父组件选中的日期
    if (props.onConfirm) props.onConfirm(date);
    hidePicker();
  };

  // 暴露方法给父组件
  useImperativeHandle(ref, () => ({
    showPicker,
    hidePicker
  }));

  return (
    <View>
      <DateTimePickerModal
        isVisible={isPickerVisible}
        mode="datetime"
        onConfirm={handleConfirm}
        onCancel={hidePicker}
      />
    </View>
  );
});

export default CustomDateTimePicker;

步骤2：修改AddMeetingScreen组件 #

创建Ref并调用Picker的方法：

import React, { useRef, useState } from "react";
import { SafeAreaView, View, TouchableOpacity, Text, Icon } from "react-native";
import CustomDateTimePicker from './CustomDateTimePicker';
import MinimalTextInput from './MinimalTextInput';

const AddMeetingScreen = ({ navigation }) => {
  // 创建Picker的Ref
  const datePickerRef = useRef(null);
  const [chosenDate, setChosenDate] = useState("");

  const _popAddMeeting = () => {
    navigation.pop();
  };

  // 通过Ref调用Picker的show方法
  const _showPicker = () => {
    datePickerRef.current?.showPicker();
  };

  // 处理父组件收到的日期
  const _handleDateConfirm = (date) => {
    setChosenDate(date.toLocaleString());
    console.warn("A date has been picked: ", date);
  };

  return (
    <>
      <SafeAreaView style={styles.addMeetingContainer}>
        <View style={styles.headerContainer}>
          <TouchableOpacity onPress={_popAddMeeting} style={styles.backButtonTouchable}>
            <Icon name="arrow-back-outline" size={28} color="#000" />
          </TouchableOpacity>
          <View style={{ position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, justifyContent: 'center', alignItems: 'center' }}>
            <Text style={styles.title}> New Meeting </Text>
          </View>
        </View>
        <View style={{ marginTop: 32 }}>
          <MinimalTextInput 
            title="When" 
            placeholder="Select date & time" 
            value={chosenDate}
            onFocus={_showPicker} 
          />
        </View>
        {/* 传递Ref给Picker */}
        <CustomDateTimePicker 
          ref={datePickerRef}
          onConfirm={_handleDateConfirm}
        />
      </SafeAreaView>
    </>
  );
};

// 样式定义
const styles = {
  addMeetingContainer: {
    flex: 1,
    backgroundColor: '#fff'
  },
  headerContainer: {
    flexDirection: 'row',
    padding: 16,
    alignItems: 'center'
  },
  backButtonTouchable: {
    padding: 8
  },
  title: {
    fontSize: 20,
    fontWeight: 'bold'
  }
};

export default AddMeetingScreen;

方案对比 #

• 受控组件方案：更符合React的设计理念，状态管理清晰，数据流单向，适合大多数场景，彻底消除状态冗余。
• Ref方案：保留子组件的内部状态，适合不想重构子组件的场景，但属于命令式操作，不如受控组件直观。

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