React Native日期选择器选中日期后无法在TextInput显示求助

问题根源 #

• TextInput 误用 defaultValue：defaultValue 仅在组件首次渲染时生效，后续状态更新不会同步到输入框，必须用受控组件的 value 属性绑定状态。
• 直接绑定 Date 对象：text 状态存储的是 Date 类型对象，TextInput 无法直接渲染对象，需要格式化为可读字符串（如 YYYY-MM-DD）。
• 初始状态未处理：text 初始值为 undefined，会导致输入框初始显示异常。

修复后的完整代码 #

import { useState } from 'react';
import { TextInput, StyleSheet } from 'react-native';
import DateTimePicker from '@react-native-community/datetimepicker';

// 日期格式化工具函数：将Date转为YYYY-MM-DD字符串
const formatDate = (date) => {
  if (!date) return '';
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, '0');
  const day = String(date.getDate()).padStart(2, '0');
  return `${year}-${month}-${day}`;
};

export default function DatePickerExample() {
  // 存储格式化后的日期字符串，用于TextInput显示
  const [displayText, setDisplayText] = useState(formatDate(new Date()));
  // 存储原始Date对象，用于DateTimePicker的选中值
  const [selectedDate, setSelectedDate] = useState(new Date());
  const [displayMode, setDisplayMode] = useState('date');
  const [isPickerVisible, setPickerVisible] = useState(false);

  const handleDateChange = (event, newDate) => {
    setPickerVisible(false);
    if (newDate) {
      setSelectedDate(newDate);
      // 将新选择的日期格式化后更新显示状态
      setDisplayText(formatDate(newDate));
    }
  };

  const showDatePicker = () => {
    setDisplayMode('date');
    setPickerVisible(true);
  };

  return (
    <>
      <TextInput
        style={styles.forminput}
        label="Baby's Date of Birth"
        // 用value绑定状态，实现受控组件同步更新
        value={displayText}
        onPressIn={showDatePicker}
        // 设置为只读，确保日期只能通过选择器修改
        editable={false}
      />
      {isPickerVisible && (
        <DateTimePicker
          testID="dateTimePicker"
          value={selectedDate}
          mode={displayMode}
          is24Hour={true}
          display="default"
          onChange={handleDateChange}
        />
      )}
    </>
  );
}

const styles = StyleSheet.create({
  forminput: {
    borderWidth: 1,
    borderColor: '#ccc',
    padding: 10,
    margin: 10,
    borderRadius: 5,
  },
});

关键修改说明 #

• 拆分状态职责：用 displayText 存格式化后的字符串（给TextInput），selectedDate 存原始Date对象（给选择器），避免状态混淆。
• 替换 defaultValue 为 value：让TextInput成为受控组件，状态更新时自动同步显示内容。
• 添加格式化逻辑：将Date对象转为用户可读的字符串，同时处理空值避免显示异常。
• 设置输入框只读：防止用户手动修改输入内容，保证日期来源唯一。

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