我正在开发一个React原生应用。我在里面使用了一个日期时间选择器。我的问题是我想在选择日期和时间后立即在textInput中显示从日期时间选择器中选择的日期和时间......如何做到这一点。下面是我的代码
import React from 'react';
import { StyleSheet, Text, View, TextInput } from 'react-native';
import DateTimePicker from 'react-native-modal-datetime-picker';
export default class App extends React.Component {
constructor(props){
super(props)
this.state=({
isDateTimePickerVisible: false,
selecteddate:''
})
}
_showDateTimePicker = () => this.setState({ isDateTimePickerVisible: true });
_hideDateTimePicker = () => this.setState({ isDateTimePickerVisible: false });
_handleDatePicked = (pickeddate) => {
day = pickeddate.getDate();
month = pickeddate.getMonth();
year = pickeddate.getFullYear();
console.log('A date has been picked: ' + day + '-' + month + '-' + year);
exdate= day + '-' + month + '-' + year
this._hideDateTimePicker();
};
onFocus = () => {
this._handleDatePicked();
}
render() {
return (
<View style={styles.container}>
<Text>Open up App.js to start working on your app!</Text>
<TextInput
placeholder="placeholder..."
onFocus={ () => this._showDateTimePicker() }
value={this.state.selecteddate}
/>
{/* //--------------------------------------DateTimePicker */}
<DateTimePicker
isVisible={this.state.isDateTimePickerVisible}
onConfirm={this._handleDatePicked}
onCancel={this._hideDateTimePicker}
mode={'date'}
datePickerModeAndroid={'spinner'}
/>
{/* //-------------------------------------- */}
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
3条答案
按热度按时间fbcarpbf1#
您只是忘记在_handleDatePicked方法中添加设置状态!!!
3b6akqbq2#
您必须在your _handleDatePicked()中设置选定状态
你可以走了!
sauutmhj3#
_handleDatePicked =(当前)=〉{
设exdate =
${current.getFullYear()}-${current.getMonth()}-${current.getDate()}
这个.设置状态({日期:exdate});();}