反应本机模态日期时间选择器不起作用

Question

我正在使用反应本机模态日期时间选择器向用户选择日期时间。 我正在检查时间是否是过去的时间，那么现在将不予批准。 他必须再次选择。 但是当我选择上一次。 然后要再次选择模态不起作用。 为什么呢？

这是我的主要组成部分

        _showDateTimePicker = () => this.setState({ isDateTimePickerVisible: true });

      _hideDateTimePicker = () => this.setState({ isDateTimePickerVisible: false });

      _handleDatePicked = date => {
        console.log("A date has been picked: ", date);
        if (Date.now() > Date.parse(date)) {
          console.log(" please select a future time");
        } else {
          this.setState({ orderDate: date });
          this._hideDateTimePicker();
        }
      };

             <SelectDate
                  orderDate={this.state.orderDate}
                  isDateTimePickerVisible={this.state.isDateTimePickerVisible}
                  _showDateTimePicker={this._showDateTimePicker}
                  _handleDatePicked={this._handleDatePicked}
                  _hideDateTimePicker={this._hideDateTimePicker}
                />

选择日期部分

  import React from "react";
import { View, Text } from "react-native";
import DateTimePicker from "react-native-modal-datetime-picker";
import {
  Container,
  Content,
  Header,
  Item,
  Input,
  Icon,
  Button,
  Body
} from "native-base";

class SelectDate extends React.Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  _showDateTimePicker = () => {
    this.props._showDateTimePicker();
  };

  _handleDatePicked = date => {
    this.props._handleDatePicked(date);
  };

  _hideDateTimePicker = () => {
    this.props._hideDateTimePicker();
  };

  render() {
    return (
      <View>
        <View>
          <View
            style={{
              flex: 1,
              backgroundColor: "#fff",
              marginLeft: 15,
              marginRight: 15
            }}
          >
            <View style={{ alignSelf: "center", margin: 10, height: 20 }}>
              {this.props.orderDate === "NO Date Time Selected" ? (
                <Text style={{ color: "#000" }}>{this.props.orderDate}</Text>
              ) : (
                <Text style={{ color: "#000" }}>
                  {this.props.orderDate.toLocaleString()}
                </Text>
              )}
            </View>
            <Button block onPress={this._showDateTimePicker}>
              <Text style={{ color: "red", fontSize: 16 }}>
                * Select Date and Time{" "}
              </Text>
            </Button>
            <DateTimePicker
              isVisible={this.props.isDateTimePickerVisible}
              onConfirm={this._handleDatePicked}
              onCancel={this._hideDateTimePicker}
              mode="datetime"
              is24Hour={false}
            />
          </View>
        </View>
      </View>
    );
  }
}

export default SelectDate;

Answer 1

您需要发送日期以运行onClick事件，这是解决方案：

onConfirm={(date)=>this._handleDatePicked(date)}