react-native - 反应本机模式日期时间选择器不起作用
问题描述
我正在使用本机模式日期时间选择器向用户选择日期时间。我正在检查时间是否是过去的时间,那么现在它不会被授予。他不得不再次选择。但是当我选择以前的时间时。然后想再次选择模式不起作用。为什么 ?
这是我的主要组成部分
_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;
解决方案
您需要发送日期来运行 onClick 事件,这是解决方案:
onConfirm={(date)=>this._handleDatePicked(date)}
推荐阅读
- ffmpeg - youtube-dl 有一个 3gp 文件,显然它不包含任何视频流。有没有办法播放视频?
- python - 在 PyQt5 中使用 xtics 时 python 崩溃
- javascript - 错误:在 Windows 7 上生成 git ENOENT
- c# - 如何将特定按钮按下记录到 xml?
- javascript - 在异步计时中调用 Javascript 函数
- python - 无法将 TensorFlow 模型冻结到冻结(.pb)文件中
- c# - NuGet、Packages.config、.csproj 和参考
- scala - 使用fixture.FlatSpecLike将特征混合到ScalaTest中的测试方法中
- android - 如何完全断开 Android 应用与 Firebase 的连接(在 Android Studio 中)
- ios - 解决单次目标检测器中的类别不平衡问题