React Native日期选择器无法选中日期并传递至getdata函数问题

问题根源 #

你的代码存在两个关键错误，导致无法选中日期并传递值：

• onChange事件参数未传递：DateTimePicker的onChange调用changeSelectedDate()时，没有传递事件和选中的日期参数，函数里拿不到selectedDate。
• 未同步更新日期状态：选中新日期后没有更新mydate状态，日期选择器无法同步显示选中的日期，还可能引发moment处理空值的报错。

修复步骤 #

1. 修正onChange绑定：直接将changeSelectedDate赋值给onChange，确保事件参数能正常传递。
2. 更新mydate状态：在changeSelectedDate里用选中的日期更新mydate，让选择器同步显示最新选中值。
3. 处理moment空值问题：用currentDate（selectedDate || mydate）代替selectedDate传给moment，避免空值报错。

完整修正代码 #

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

const DatePickerDemo = () => {
  const [text, setTextname] = useState('');
  const [mydate, setDate] = useState(new Date());
  const [displaymode, setMode] = useState('date');
  const [isDisplayDate, setShow] = useState(false);

  const changeSelectedDate = (event, selectedDate) => {
    const currentDate = selectedDate || mydate;
    const formattedDate = moment(currentDate).format('DD/MM/YYYY');
    console.log('选中的日期:', formattedDate);
    setTextname(formattedDate);
    setDate(currentDate);
    setShow(false);
  };

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

  const displayDatepicker = () => {
    showMode('date');
  };

  const getdata = () => {
    console.log('最终选中的日期:', text);
  };

  return (
    <View>
      <Button onPress={displayDatepicker} title="Show date picker!" />
      {isDisplayDate && (
        <DateTimePicker
          testID="dateTimePicker"
          value={mydate}
          mode={displaymode}
          is24Hour={true}
          display="default"
          onChange={changeSelectedDate}
        />
      )}
      <View style={styles.buttonw}>
        <Button
          color="#7743DB"
          title="Lets Go"
          onPress={getdata}
        />
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  buttonw: {
    marginTop: 20,
  },
});

export default DatePickerDemo;

额外提示 #

• 初始化text时设为空字符串''，避免初始值为undefined的潜在问题。
• 确保已正确安装@react-native-community/datetimepicker和moment依赖。

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