我正在為我參加的黑客馬拉松撰寫待辦事項應用程式。我在彈出視窗中實作了一個時間選擇器，但只要我按下時間選擇器上的取消按鈕，它就根本沒有關閉. 任何可能發生這種情況的原因，我嘗試設定一個，onCancel但這似乎不起作用。當我在檔案中單擊取消時，我找不到有關如何關閉選擇器的任何資訊。
import React, {Component, useState} from 'react';
import {withNavigation} from 'react-navigation';
import {
StyleSheet,
Dimensions,
TouchableOpacity,
Text,
Modal,
View,
Image,
ImageBackground,
ScrollView,
TextInput,
} from 'react-native';
import Arrow from '../components/assets/arrow_left.png';
import Background from '../components/assets/reminder_back.png';
import add from '../components/assets/add.png';
import Card from './Card';
import {openDatabase} from 'react-native-sqlite-storage';
import DateTimePicker from '@react-native-community/datetimepicker';
var db = openDatabase({name: 'UserDatabase.db'});
class Reminder extends Component {
constructor(props) {
super(props);
this.state = {
reminder_name: '',
reminder_time: '',
reminder_date: '',
reminder_complete: '',
reminders: [],
modalVisible: false,
date: new Date(1598051730000),
showDate: false,
mode: ''
};
}
setModalVisible = visible => {
this.setState({modalVisible: visible});
};
componentDidMount = () => {
db.transaction(tx => {
tx.executeSql(
"SELECT * FROM data WHERE reminder_type='reminder'",
[],
(tx, result) => {
for (let i = 0; i < result.rows.length; i) {
this.state.reminders.push(result.rows.item);
}
},
);
});
};
OnChangeTime = (event, selectedDate) => {
const currentDate = selectedDate || this.state.date;
this.setState({date: currentDate});
};
SelectTime = (visible) => {
this.setState({showDate: visible, mode: 'time'});
}
HandleTime = (time) => {
this.setState({reminder_time: time})
}
render() {
const {modalVisible, date, showDate, mode} = this.state;
return (
<View>
<ImageBackground source={Background} style={styles.background} />
<Modal
animationType="slide"
transparent={true}
visible={modalVisible}
style={styles.popup}>
<View style={styles.centeredView}>
<View style={styles.modalView}>
<TextInput placeholder="Reminder Title" />
<TouchableOpacity onPress={() => this.SelectTime(true)}>
<Text>Select Time</Text>
</TouchableOpacity>
<TouchableOpacity
onPress={() => this.setModalVisible(!modalVisible)}>
<Text>Close Popup</Text>
</TouchableOpacity>
</View>
</View>
</Modal>
<View style={styles.root}>
<TouchableOpacity
onPress={() => this.props.navigation.navigate('Dashboard')}>
<Image source={Arrow} style={styles.back} />
</TouchableOpacity>
</View>
<View>
<ScrollView style={styles.container}>
{this.state.reminders.map(function (item) {
return (
<Card id={item.id}>
<TouchableOpacity
style={styles.complete}
onPress={() => alert(item.id)}
/>
<Text style={styles.reminder_title}>{item.name}</Text>
</Card>
);
})}
</ScrollView>
</View>
<TouchableOpacity
style={styles.filter_button}
onPress={() => this.setModalVisible(true)}>
<Image source={add} style={styles.filter} />
</TouchableOpacity>
{showDate && (
<DateTimePicker
testID="dateTimePicker"
display="default"
value={date}
is24Hour={true}
mode={mode}
onChange={() => this.OnChangeTime()}
onConfirm={() => this.HandleTime()}
onCancel={() => this.setModalVisible(!modalVisible)}
/>
)}
</View>
);
}
}
const styles = StyleSheet.create({
popup: {
justifyContent: 'center',
alignItems: 'center',
},
centeredView: {
marginTop: 22,
width: 250,
height: 250,
},
modalView: {
marginLeft: 55,
marginTop: 95,
backgroundColor: 'white',
justifyContent: 'center',
alignItems: 'center',
borderRadius: 20,
padding: 35,
shadowColor: '#000',
shadowOffset: {
width: 0,
height: 2,
},
shadowOpacity: 0.25,
shadowRadius: 4,
elevation: 5,
width: 250,
height: 250,
},
buttonClose: {
backgroundColor: '#2196F3',
},
complete: {
width: 35,
height: 35,
borderRadius: 25,
borderColor: '#C0C0C0',
borderWidth: 1,
marginTop: 18,
marginLeft: 15,
},
reminder_title: {
fontSize: 16,
marginTop: 25,
marginLeft: 15,
},
filter_button: {
backgroundColor: '#4169e1',
width: 60,
height: 60,
marginTop: 15,
borderRadius: 50,
alignSelf: 'center',
},
filter: {
alignSelf: 'center',
width: 50,
height: 50,
marginTop: 5,
borderRadius: 25,
},
container: {
alignSelf: 'center',
width: 350,
height: 465,
},
root: {
width: Dimensions.get('window').width,
height: 45,
},
back: {
marginLeft: 10,
},
background: {
resizeMode: 'contain',
width: Dimensions.get('window').width,
height: Dimensions.get('window').height,
zIndex: 0,
position: 'absolute',
},
});
export default Reminder;
更新
我event.type在我的OnChangeTime函式中添加了一個，但現在它正在關閉，我收到一條警告說undefined is not an object (evaluating 'event.type')
OnChangeTime = (event, selectedDate) => {
const currentDate = selectedDate || this.state.date;
if (event.type == "set"){
this.setState({date: currentDate});
}else if (event.type == "dismissed") {
this.setState({showDate: false});
}
};
uj5u.com熱心網友回復：
在onCancel呼吁setModalVisible，但選擇器似乎并不為模式的一部分。你應該有onCancel={() => this.setState({showDate: false})}
編輯
鑒于您正在更新，您需要從 onChange 處理程式傳遞事件和日期屬性：
<DateTimePicker
testID="dateTimePicker"
display="default"
value={date}
is24Hour={true}
mode={mode}
onChange={this.OnChangeTime} // or more explicit onChange={(event, date) => this.OnChangeTime(event, date)}
// you can remove this => onConfirm={() => this.HandleTime()}
// you can remove this => onCancel={() => this.setModalVisible(!modalVisible)}
/>
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/386477.html
標籤：反应原生