React Native单个组件内两个DateTimePickerModal仅一个值可更新的问题

问题描述 #

在React Native组件中添加两个DateTimePickerModal时，虽然能触发打开操作，但无论选择哪一个日期选择器，只有第一个绑定的selectedDate值会更新，第二个selectedDate1始终无法被正确赋值。相关代码如下：

import React, { useState } from 'react';
import { Button, View, Text } from 'react-native';
import DateTimePickerModal from 'react-native-modal-datetime-picker';
import moment from 'moment';

const Example = () => {
  const [selectedDate, setSelectedDate] = useState();
  const [selectedDate1, setSelectedDate1] = useState();
  const [isDatePickerVisible, setDatePickerVisibility] = useState(false);

  const showDatePicker = () => {
    setDatePickerVisibility(true);
  };

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

  const handleConfirm = (date) => {
    setSelectedDate(date);
    hideDatePicker();
  };

   const handleConfirm1 = (date) => {
    setSelectedDate1(date);
    hideDatePicker();
  };
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>{`Date:  ${selectedDate? moment(selectedDate).format("MM/DD/YYYY"):"Please select date"}`}</Text>
      <Button title="Show Date Picker" onPress={showDatePicker} />
      <DateTimePickerModal
        isVisible={isDatePickerVisible}
        mode="date"
        onConfirm={handleConfirm}
        onCancel={hideDatePicker}
      />
       <Text>{`Date:  ${selectedDate1? moment(selectedDate1).format("MM/DD/YYYY"):"Please select date"}`}</Text>
      <Button title="Show Date Picker" onPress={showDatePicker} />
      
      <DateTimePickerModal
        isVisible={isDatePickerVisible}
        mode="date"
        onConfirm={handleConfirm1}
        onCancel={hideDatePicker}
      />
    </View>
  );
};

export default Example;

解决方法 #

当然可以在单个组件内使用多个DateTimePickerModal，问题根源在于你用同一个isDatePickerVisible状态控制两个选择器的显示，且触发逻辑没有区分目标选择器——点击任意按钮都会同时触发两个选择器的显示（只是视觉上重叠你没察觉），而确认时实际执行的是上层选择器的onConfirm方法，导致只有selectedDate被更新。

下面提供两种实用的修改方案：

方案一：为每个选择器单独设置显示状态 #

给每个日期选择器分配独立的可见性状态，精准控制每个选择器的显示与隐藏，逻辑清晰易懂：

import React, { useState } from 'react';
import { Button, View, Text } from 'react-native';
import DateTimePickerModal from 'react-native-modal-datetime-picker';
import moment from 'moment';

const Example = () => {
  const [selectedDate, setSelectedDate] = useState();
  const [selectedDate1, setSelectedDate1] = useState();
  // 为两个选择器分别设置可见性状态
  const [isFirstPickerVisible, setFirstPickerVisibility] = useState(false);
  const [isSecondPickerVisible, setSecondPickerVisibility] = useState(false);

  // 分别控制每个选择器的显示
  const showFirstDatePicker = () => {
    setFirstPickerVisibility(true);
  };

  const showSecondDatePicker = () => {
    setSecondPickerVisibility(true);
  };

  const hideFirstDatePicker = () => {
    setFirstPickerVisibility(false);
  };

  const hideSecondDatePicker = () => {
    setSecondPickerVisibility(false);
  };

  const handleFirstConfirm = (date) => {
    setSelectedDate(date);
    hideFirstDatePicker();
  };

  const handleSecondConfirm = (date) => {
    setSelectedDate1(date);
    hideSecondDatePicker();
  };

  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center', gap: 20 }}>
      <Text>{`第一个日期:  ${selectedDate ? moment(selectedDate).format("MM/DD/YYYY") : "请选择日期"}`}</Text>
      <Button title="打开第一个日期选择器" onPress={showFirstDatePicker} />
      <DateTimePickerModal
        isVisible={isFirstPickerVisible}
        mode="date"
        onConfirm={handleFirstConfirm}
        onCancel={hideFirstDatePicker}
      />

      <Text>{`第二个日期:  ${selectedDate1 ? moment(selectedDate1).format("MM/DD/YYYY") : "请选择日期"}`}</Text>
      <Button title="打开第二个日期选择器" onPress={showSecondDatePicker} />
      <DateTimePickerModal
        isVisible={isSecondPickerVisible}
        mode="date"
        onConfirm={handleSecondConfirm}
        onCancel={hideSecondDatePicker}
      />
    </View>
  );
};

export default Example;

方案二：用单个状态标记当前激活的选择器 #

如果不想维护多个状态，可以用一个状态变量记录当前打开的是哪个选择器，确认时根据这个状态更新对应的值，还能减少重复的组件实例：

import React, { useState } from 'react';
import { Button, View, Text } from 'react-native';
import DateTimePickerModal from 'react-native-modal-datetime-picker';
import moment from 'moment';

const Example = () => {
  const [selectedDate, setSelectedDate] = useState();
  const [selectedDate1, setSelectedDate1] = useState();
  // 用状态标记当前激活的选择器，可选值：'first'、'second'、null
  const [activePicker, setActivePicker] = useState(null);

  const showDatePicker = (pickerType) => {
    setActivePicker(pickerType);
  };

  const hideDatePicker = () => {
    setActivePicker(null);
  };

  const handleConfirm = (date) => {
    if (activePicker === 'first') {
      setSelectedDate(date);
    } else if (activePicker === 'second') {
      setSelectedDate1(date);
    }
    hideDatePicker();
  };

  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center', gap: 20 }}>
      <Text>{`第一个日期:  ${selectedDate ? moment(selectedDate).format("MM/DD/YYYY") : "请选择日期"}`}</Text>
      <Button title="打开第一个日期选择器" onPress={() => showDatePicker('first')} />

      <Text>{`第二个日期:  ${selectedDate1 ? moment(selectedDate1).format("MM/DD/YYYY") : "请选择日期"}`}</Text>
      <Button title="打开第二个日期选择器" onPress={() => showDatePicker('second')} />

      {/* 只需要一个DateTimePickerModal实例，根据activePicker控制显示和确认逻辑 */}
      <DateTimePickerModal
        isVisible={!!activePicker}
        mode="date"
        onConfirm={handleConfirm}
        onCancel={hideDatePicker}
      />
    </View>
  );
};

export default Example;

方案对比 #

• 方案一逻辑直观，每个选择器独立控制，适合需求简单、选择器数量少的场景；
• 方案二更节省组件实例，减少重复代码，适合需要多个同类选择器的场景。

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