javascript - How to get Date from "react-native-datepicker" in Child-Component?
问题描述
This is my first question about react native. I am creating React Native App as a beginner.
I am using "react-native-datepicker" (https://github.com/xgfe/react-native-datepicker) for getting Date in Child-Component and I want to store this Date into Firebase. However, I couldn't get this Date which each user input on picker.
So, how to do this?
Below one is Parent-Component
class PersonalInfo1 extends React.Component {
state = {
fromTermOfMaridge: '',
ToTermOfMaridge: '',
}
handleOnpress() {
const db = firebase.firestore();
const { currentUser } = firebase.auth();
db.collection(`users/${currentUser.uid}/form1`).add({
form1 :
[
{ fromTermOfMaridge: this.state.fromTermOfMaridge },
{ ToTermOfMaridge: this.state.ToTermOfMaridge },
]
})
.then(() => {
this.props.navigation.goBack();
})
.catch((error) => {
console.log(error);
});
}
render() {
return (
<ScrollView style={styles.container}>
<InfoHeader
navigation={this.props.navigation}>申請者情報1
</InfoHeader>
<Notes />
<View style={styles.questionTextBoxDateMargin}>
<QuestionTextBoxDate
onDateChange={(date) =>
{ this.setState({ fromTermOfMaridge: date }); }}>
婚姻期間(上記で既婚・離婚と答えた方)
</QuestionTextBoxDate>
<QuestionTextBoxDate onDateChange={(date) =>
{ this.setState({ ToTermOfMaridge: date }); }}>
から
</QuestionTextBoxDate>
</View>
<SubmitButton
style={styles.saveButton}
onPress={this.handleOnpress.bind(this)}>
保存
</SubmitButton>
<Copyrights />
</ScrollView>
);
}
}
Next one is Child-component
import React from 'react';
import { StyleSheet, View, Text } from 'react-native';
import DatePicker from 'react-native-datepicker';
class QuestionTextBoxDate extends React.Component {
constructor(props) {
super(props)
this.state = {
date : '',
};
}
render() {
return (
<View style={styles.container}>
<View style={styles.questionTextBox}>
<Text style={styles.questionText}>
{this.props.children}
</Text>
</View>
<DatePicker
style={styles.datePicker}
date={this.state.date}
mode="date"
locale="ja"
placeholder="年月日を入力"
format="YYYY年MM月DD日"
minDate="1900-01-01"
maxDate="2020-01-01"
confirmBtnText="確定"
cancelBtnText="閉じる"
customStyles={{
dateInput: {
height: 30,
backgroundColor: '#F4F4F4',
borderWidth: 1,
borderRadius: 6,
borderColor: '#707070',
}
}}
showIcon={false}
onDateChange={(date) => { this.setState({ date }); }}
/>
</View>
);
} }
解决方案
In DatePicker component change onDateChange method to the one as given below
<DatePicker
style={styles.datePicker}
date={this.state.date}
mode="date"
locale="ja"
placeholder="年月日を入力"
format="YYYY年MM月DD日"
minDate="1900-01-01"
maxDate="2020-01-01"
confirmBtnText="確定"
cancelBtnText="閉じる"
customStyles={{
dateInput: {
height: 30,
backgroundColor: '#F4F4F4',
borderWidth: 1,
borderRadius: 6,
borderColor: '#707070',
}
}}
showIcon={false}
onDateChange={(date) => { this.props.onDateChange && this.props.onDateChange(date);this.setState({ date }); }}
/>
推荐阅读
- c# - 跨多个项目的 NuGet 包
- php - 使用 php 文件的结果更改模态内容
- c# - 如何识别 StripLines 集合(轴)(序列化)中的一条带状线?
- reactjs - 元件更换控制输入
- excel - 有没有可以用来手动选择 Excel VBA 列表框中的值的函数?
- github - 是否可以从 github 存储库中删除所有提交?
- c - 结构指针传递给函数
- django - 在 Django Rest Framework 中替换基本身份验证
- javascript - 如何在 C3.js 中隐藏堆积条形图上的条形
- objective-c - TeamCity - xcodebuild:遇到来自门户的意外结果代码('1100')