Question

这是我关于本机反应的第一个问题。我正在创建React Native App作为初学者。

我正在使用“ react-native-datepicker”（https://github.com/xgfe/react-native-datepicker）来获取子组件中的日期，我想将此日期存储到Firebase中。但是，我无法获得每个用户在选择器上输入的日期。

那么，该怎么做？

下面是父级组件

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}>申請者情報１ 
     </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>
 );
 }
}

下一个是子组件

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>
);

} }

Answer 1

在DatePicker组件中，将onDateChange方法更改为如下所示

<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 }); }}
    />

如何从子组件中的“ react-native-datepicker”获取日期？

1 个答案: