1

我是 React Native 的新手，在分别显示日期和时间选择器方面遇到了困难

我使用 npm 包：react-native-modal-datetime-picker

在代码中：我试图分别显示所选的开始日期和结束日期。但是，我对这两个参数只使用一个函数。当我颠倒 2 个参数的顺序时handleConfirm()，它会反向工作。请帮助并随时调整我在 JS 中的知识 :)))

这是显示它无法正常工作的剪辑

import React, { useState } from 'react'
import {
  View,
  Button,
  StyleSheet,
  TouchableOpacity,
  Text
} from 'react-native'
//import DateTimePicker from '@react-native-community/datetimepicker';
import DateTimePickerModal from "react-native-modal-datetime-picker";
import  moment from 'moment'

const DateTimeScreen = () => {
  const [isDatePickerVisible, setDatePickerVisibility] = useState(false);
  const [mode, setMode] = useState('date');
  const [chosenMode, setChosenMode] = useState(null)  // chosenMode: true ? startDay : endDay

  const [chosenStartDate, setChosenStartDate] = useState(moment().format("MMM Do YY"))
  const [chosenEndDate, setChosenEndDate] = useState(moment().format("MMM Do YY"));

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

  const showTimePicker = () => {
    showMode('time')
  };

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

  const hideDatePicker = () => {
    setDatePickerVisibility(false);
  };

  const handleConfirm = (endDate, startDate) => { 
    /* when I try to reverse the order of parameters in this function, 
    the starting day button works but ending day doesn't and vice versa */
    hideDatePicker();
    if(chosenMode){
      setChosenStartDate(moment(startDate).format("MMM Do YY"))  
    }else{
      setChosenEndDate(moment(endDate).format("MMM Do YY"))
    }
  }


  return (
    <View>
      <Button title="Starting day" onPress={() => {
        setChosenMode(true);
        showDatePicker();
      }} />
      <Button title="Ending day" onPress={() => {
        setChosenMode(false);
        showDatePicker();
      }} />
      <Button title="Starting time" onPress={showTimePicker} />
      <Button title="Ending time" onPress={showTimePicker} />
      {isDatePickerVisible && (
        <DateTimePickerModal
        isVisible={isDatePickerVisible}
        mode={mode}
        onConfirm={handleConfirm}
        onCancel={hideDatePicker}
      />
      )}
      <Text>Stating day: {chosenStartDate}</Text>
      <Text>Ending day: {chosenEndDate}</Text>
    </View>
  );
};

export default DateTimeScreen;

const styles = StyleSheet.create({
  container:{
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center'
  },
  overlay:{
    flex: 1,
    justifyContent: 'center'
  }
})
4

1 回答 1

2

DateTimePickerModal包中react-native-modal-datetime-picker的函数需要一个onConfirm接受单个日期参数的函数，如他们的示例使用文档中所示。您正在传递一个handleConfirm需要两个日期参数的函数。当您在模式上按下确认handleConfirm并被调用时，只有您提供的第一个参数才会填充日期。

正确的方法是编写您的函数handleConfirm，使其仅使用单个日期参数：

/* Notice there's only one `date` parameter */
const handleConfirm = (date) => {
  hideDatePicker();
  if(chosenMode){
    /* Here, use the same date in both branches of the if statement */
    setChosenStartDate(moment(date).format("MMM Do YY"))  
  }else{
    /* `date` is used again */
    setChosenEndDate(moment(date).format("MMM Do YY"))
  }
}
于 2020-02-25T12:57:05.863 回答