我们如何使用 react-native-community/dateTimePicker 显示两个带有 startTime 和 EndTime 的选择器

Question

我想选择两次 startTime 和 EndTime，但我们保存在 useState 中的值会更改 start-Time 代替 EndTime，有时当我选择 endTime 时，startTime 的选择器 select 自动值，反之亦然。我如何管理状态和选择器一次只保存一个值而不改变第二个状态的值

  const [show, setShow] = useState(false);
  const [fromTime, setFromTime] = useState(new Date());
  const [toTime, setToTime] = useState(new Date());
const onFromTimeChange = (event, selectedFromTime) => {
    const currentFrom = selectedFromTime || fromTime;
    setShow(!show);
    setFromTime(currentFrom);
  };
  const onToTimeChange = (event, selectedToTime) => {
    const currentToTime = selectedToTime || toTime;
    setShow(!show);
    setToTime(currentToTime);
  };
  const showMode = (currentMode) => {
    setShow(true);
    setMode(currentMode);
  };
  const showFromTimepicker = () => {
    showMode("time");
  };
  const showToTimepicker = () => {
    showMode("time");
  };
return ( <Text style={styles.workUkText}>
              Job Availability (Select Hours)
            </Text>
            <View style={styles.ukWorkView}>
              <Text style={styles.fromAvailability}>From</Text>
              <View style={styles.fromTime}>
                <TextInput
                  onTouchStart={showFromTimepicker}
                  style={{ fontWeight: "600", fontSize: 16 }}
                  value={moment(fromTime).format("HH : mm")}
                  onChangeText={onFromTimeChange}
                />
                {show && (
                  <DateTimePicker
                    testID="dateTimePicker"
                    value={fromTime}
                    mode={mode}
                    is24Hour={true}
                    display="default"
                    onChange={onFromTimeChange}
                  />
                )}
              </View>
              <Text style={styles.fromAvailability}>To</Text>
              <View style={styles.fromTime}>
                <TextInput
                  onTouchStart={showToTimepicker}
                  style={{ fontWeight: "600", fontSize: 16 }}
                  value={moment(toTime).format("HH : mm")}
                  onChangeText={onToTimeChange}
                />
                {show && (
                  <DateTimePicker
                    testID="TimePicker"
                    value={toTime}
                    mode={mode}
                    is24Hour={true}
                    display="default"
                    onChange={onToTimeChange}
                  />
                )}
              </View>
)
.```

Answer 1

您正在为两个选择器使用相同的 state show 。 使用其他show state 将有助于解决您的问题或使用单个 state 您可以这样做

 const [show, setShow] = useState('none');
 const [fromTime, setFromTime] = useState(new Date());
 const [toTime, setToTime] = useState(new Date());

 const onFromTimeChange = (event, selectedFromTime) => {
    const currentFrom = selectedFromTime || fromTime;
    setShow('none');
    setFromTime(currentFrom);
  };
  const onToTimeChange = (event, selectedToTime) => {
    const currentToTime = selectedToTime || toTime;
    setShow('none');
    setToTime(currentToTime);
  };
  const showMode = (currentMode,pickerType) => {
    setShow(pickerType);
    setMode(currentMode);
  };


return ( <Text style={styles.workUkText}>
              Job Availability (Select Hours)
            </Text>
            <View style={styles.ukWorkView}>
              <Text style={styles.fromAvailability}>From</Text>
              <View style={styles.fromTime}>
                <TextInput
                  onTouchStart={()=>showMode("time","showFromPicker")}
                  style={{ fontWeight: "600", fontSize: 16 }}
                  value={moment(fromTime).format("HH : mm")}
                  onChangeText={onFromTimeChange}
                />
                {show==="showFromPicker" && (
                  <DateTimePicker
                    testID="dateTimePicker"
                    value={fromTime}
                    mode={mode}
                    is24Hour={true}
                    display="default"
                    onChange={onFromTimeChange}
                  />
                )}
              </View>
              <Text style={styles.fromAvailability}>To</Text>
              <View style={styles.fromTime}>
                <TextInput
                  onTouchStart={()=>showMode("time","showToPicker")}
                  style={{ fontWeight: "600", fontSize: 16 }}
                  value={moment(toTime).format("HH : mm")}
                  onChangeText={onToTimeChange}
                />
                {show==="showToPicker" && (
                  <DateTimePicker
                    testID="TimePicker"
                    value={toTime}
                    mode={mode}
                    is24Hour={true}
                    display="default"
                    onChange={onToTimeChange}
                  />
                )}
              </View>
)