React本机模态日期时间选取器不工作

wj8zmpe1  于 2023-02-09  发布在  React
关注(0)|答案(1)|浏览(132)

我正在使用React本地模态日期时间选择器给用户来选择日期时间.我正在检查如果时间是过去的时间那么现在它将不会被授予.他必须再次选择.但是当我选择一个以前的时间.那么想要再次选择模态不工作.为什么?
这是我的主要组件

_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;
uqzxnwby

uqzxnwby1#

您需要发送日期到函数onClick事件,这是解决方案:
onConfirm={(date)=>this._handleDatePicked(date)}

相关问题