React Native如何将timepicker选中时间显示到TextInput并解决类型报错

问题原因 #

• react-native-modal-datetime-picker 的 onConfirm 回调返回的参数是 Date对象类型，你直接把Date对象赋值给selectedTime，而TextInput的value属性只接受字符串类型，所以触发类型报错，也无法正常渲染内容。
• 两个输入框（开始时间/结束时间）共用了同一个selectedTime状态，修改任意一个都会导致两个输入框内容同步，不符合业务需求。
• TextInput 错误绑定了onChange={handleConfirm}，这个方法是时间选择器确认时才需要调用的，绑在输入框的变化事件上会导致逻辑混乱。另外输入框聚焦时触发时间选择器，需要阻止默认键盘弹出，避免和选择器冲突。

修复后完整代码 #

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

const AttendanceMain = () => {
  const [showPicker, setShowPicker] = useState(false);
  // 拆分两个时间状态，新增字段标记当前正在修改的是哪个时间
  const [fromTime, setFromTime] = useState('');
  const [toTime, setToTime] = useState('');
  const [activeInput, setActiveInput] = useState('');

  const showTimePicker = (type) => {
    setActiveInput(type);
    setShowPicker(true);
  };

  const hideTimePicker = () => {
    setShowPicker(false);
    setActiveInput('');
  };

  // 时间格式化方法，把Date转成HH:mm格式的字符串
  const formatTime = (date) => {
    const hours = String(date.getHours()).padStart(2, '0');
    const minutes = String(date.getMinutes()).padStart(2, '0');
    return `${hours}:${minutes}`;
  };

  const handleConfirm = (time) => {
    const formattedTime = formatTime(time);
    // 根据当前激活的输入框赋值对应状态
    if (activeInput === 'from') {
      setFromTime(formattedTime);
    } else if (activeInput === 'to') {
      setToTime(formattedTime);
    }
    hideTimePicker();
  };

  return (
    <View>
      <Text>From:</Text>
      <TextInput
        placeholder="00:00"
        keyboardType="numeric"
        onFocus={(e) => {
          e.preventDefault();
          showTimePicker('from');
        }}
        value={fromTime}
        // 禁用输入框手动编辑，只允许通过选择器赋值
        editable={false}
      />
      <Text>To:</Text>
      <TextInput
        placeholder="00:00"
        keyboardType="numeric"
        onFocus={(e) => {
          e.preventDefault();
          showTimePicker('to');
        }}
        value={toTime}
        editable={false}
      />
      <DateTimePickerModal
        isVisible={showPicker}
        mode="time"
        is24Hour={true}
        onConfirm={handleConfirm}
        onCancel={hideTimePicker}
      />
    </View>
  );
};

export default AttendanceMain;

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