React Native DateTimePicker选择日期后如何修改按钮标题？

你的代码存在三个核心问题，导致按钮标题无法按预期更新：

1. fDate的作用域错误 #

你在onChange函数内定义的fDate是局部变量，组件渲染的return部分根本访问不到这个变量，直接写title={fDate.toString()}要么报错，要么完全无效果。

2. 错误依赖外部props做判断条件 #

你用组件接收的selectedDate props做条件判断，但这个props在组件内部从未被更新过，组件自身维护的date状态和它完全脱节，导致条件永远不会触发。应该基于组件自己的date状态来判断是否显示格式化后的日期。

3. 日期格式化缺少补零（可选优化） #

直接拼接的话，1月会显示成2024-1-5，不符合标准的YYYY-MM-DD格式，需要给月份和日期补零。

修复后的完整代码 #

import React, { useState } from 'react';
import DateTimePicker from '@react-native-community/datetimepicker';
import { Button, Platform, StyleSheet, View } from 'react-native';

function AppDatePicker() {
    const [date, setDate] = useState(new Date());
    const [mode, setMode] = useState('date');
    const [show, setShow] = useState(false);

    // 抽离日期格式化函数，复用更方便
    const formatDate = (date) => {
        const year = date.getFullYear();
        // 补零处理：小于10的数字前加0
        const month = String(date.getMonth() + 1).padStart(2, '0');
        const day = String(date.getDate()).padStart(2, '0');
        return `${year}-${month}-${day}`;
    };

    const onChange = ({ selectedDate }) => {
        const currentDate = selectedDate || date;
        setShow(Platform.OS === 'ios');
        setDate(currentDate);
    };

    const showMode = (currentMode) => {
        setShow(true);
        setMode(currentMode);
    };

    return (
        <View>
            <View style={styles.button}>
                {/* 基于组件自身date状态判断：默认显示Select Date，选择后显示格式化日期 */}
                <Button
                    onPress={() => showMode('date')}
                    title={formatDate(date) === formatDate(new Date()) ? "Select Date" : formatDate(date)}
                />
            </View>
            {show && 
                <DateTimePicker
                    value={date}
                    mode={mode}
                    display='default'
                    onChange={onChange}
                />
            }
        </View>
    );
}

const styles = StyleSheet.create({
    button: {
        margin: 20,
    },
});

export default AppDatePicker;

关键修改说明 #

• 将日期格式化逻辑抽成独立函数formatDate，在渲染时直接基于date状态生成格式化字符串，彻底解决作用域问题。
• 移除无用的selectedDate props，改用组件自身的date状态做判断：如果当前date是初始的当天日期，显示默认标题，否则显示格式化后的日期。
• 使用padStart(2, '0')给月份和日期补零，保证格式严格符合YYYY-MM-DD标准。

如果确实需要接收外部传入的selectedDate作为初始值，可以添加useEffect同步状态：

import React, { useState, useEffect } from 'react';

function AppDatePicker({ selectedDate }) {
    const [date, setDate] = useState(selectedDate || new Date());

    // 同步外部传入的selectedDate变化
    useEffect(() => {
        if (selectedDate) {
            setDate(selectedDate);
        }
    }, [selectedDate]);

    // 其他代码不变...
}

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