如何在本机反应中使用带有多日期选择器的handleChange？

Question

我正在使用 React-Native 开发一个项目，我必须使用多个日期和多个时间选择器，但我无法使用多个日期选择器/时间选择器处理它的 handleChange 函数（使用 react-native-modal-datetime-选择器）。您能告诉我如何完成这项工作吗？提前致谢！！

importing multiple times on different views:

//handleConfirm function
handleDateConfirm = (date) => {
console.log("date 1",date)
console.log("date 2",date)
console.log("date 3",date)
    this.setState({
      selectedDate: moment(date).format('MM/DD/YYYY'),
      isDatePickerVisible: false
    })
  }
View-1
<CalenderPicker isDateVisible={isDatePickerVisible} mode={'date'} minimumDate={moment(new Date()).add(1, 'h')} maximumDate={moment(new Date()).add(15, 'd').toDate()} handleDateConfirm={this.handleDateConfirm} onCancel={this.onCancel} />

View-2
<CalenderPicker isDateVisible={isDatePickerVisible} mode={'date'} minimumDate={moment(new Date()).add(1, 'h')} maximumDate={moment(new Date()).add(30, 'd').toDate()} handleDateConfirm={this.handleDateConfirm} onCancel={this.onCancel} />

View-3
<CalenderPicker isDateVisible={isDatePickerVisible} mode={'date'} minimumDate={moment(new Date()).add(1, 'h')} maximumDate={moment(new Date()).add(30, 'd').toDate()} handleDateConfirm={this.handleDateConfirm} onCancel={this.onCancel} />

//Common-Component
const CalenderPicker = ({ mode, isDateVisible,minimumDate,maximumDate,  handleDateConfirm, onCancel }) => { 
    return (
        <DateTimePickerModal
            mode={mode}
            isVisible={isDateVisible}
            minimumDate={minimumDate}
            maximumDate={maximumDate}
            display="default"
            onConfirm={handleDateConfirm}
            onCancel={onCancel}
        />
    )
}

Answer 1

你可以这样做

Working Example

import * as React from 'react';
import { Text, View, StyleSheet, Button } from 'react-native';
import Constants from 'expo-constants';
import moment from 'moment';

import CalenderPicker from './components/CalendarPicker';

// An Array of Initial values
const Init = [
  {
    id: 1,
    value: '',
    visible: false,
  },
  {
    id: 2,
    value: '',
    visible: false,
  },
  {
    id: 3,
    value: '',
    visible: false,
  },
];

export default function App() {
  const [isDateVisible, setIsDateVisible] = React.useState(false);
  const [Data, SetData] = React.useState(Init);
  let initial = new Date(Date.now() + 3600 * 1000 * 25);

  // handles DateConfirmation
  const handleDateConfirm = (data, index) => {
    let temp = [...Data];
    temp[index].value = moment(data).format('MM/DD/YYYY');
    temp[index].visible = false;
    SetData(temp);
  };

  // Executed onCancel
  const onCancel = (index) => {
    let temp = [...Data];
    temp[index].visible = false;
    SetData(temp);
  };

  // Executed when user opens a modal
  const onOpen = (index) => {
    try {
      let temp = [...Data];
      temp[index].visible = true;
      SetData(temp);
    } catch (error) {}
  };

  return (
    <View style={styles.container}>
      <CalenderPicker
        isDateVisible={Data[0].visible}
        mode={'date'}
        handleDateConfirm={(data) => handleDateConfirm(data, 0)}
        onCancel={() => onCancel(0)}
      />
      <Button title="Pick 1st Date Time" onPress={() => onOpen(0)} />
      <Text>1st Date Time - {Data[0].value}</Text>

      <CalenderPicker
        isDateVisible={Data[1].visible}
        mode={'date'}
        handleDateConfirm={(data) => handleDateConfirm(data, 1)}
        onCancel={() => onCancel(1)}
      />
      <Button title="Pick 2nd Date Time" onPress={() => onOpen(1)} />
      <Text>2nd Date Time - {Data[1].value}</Text>

      <CalenderPicker
        isDateVisible={Data[2].visible}
        mode={'date'}
        handleDateConfirm={(data) => handleDateConfirm(data, 2)}
        onCancel={() => onCancel(2)}
      />
      <Button title="Pick 3rd Date Time" onPress={() => onOpen(2)} />
      <Text>3rd Date Time - {Data[2].value}</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
    padding: 8,
  },
});

还有你的CalendarPicker.js

import React from 'react';
import DateTimePickerModal from 'react-native-modal-datetime-picker';

const CalenderPicker = ({
  mode,
  isDateVisible,
  minimumDate,
  maximumDate,
  handleDateConfirm,
  onCancel,
}) => {
  return (
    <DateTimePickerModal
      mode={mode}
      isVisible={isDateVisible}
      minimumDate={minimumDate}
      maximumDate={maximumDate}
      display="default"
      onConfirm={handleDateConfirm}
      onCancel={onCancel}
    />
  );
};

export default CalenderPicker;