React native 将本机日期选择器与Formik进行反应

我试图在表单提交时使用Formik从React native datepicker获取值，但是，我只得到了空值，似乎不知道如何传递这些值。我对native和Formik的反应相当陌生，希望能得到任何帮助。我只是想把结果记录在表单提交上。我也尝试过反作用钩形，但没有多大成功

My App.js代码：

import React, {useState} from 'react';
import {View, Text, StyleSheet, TextInput, Button, Alert} from 'react-native';
import { Formik } from 'formik';
import DatePicker from 'react-native-datepicker';
import { DateInput } from 'react-native-date-input';


const App = props =>{
const [date, setDate] = useState(new Date())
const [date2, setDate2] = useState(new Date())
return(
   <Formik
     initialValues={{ date: '', date2: '' }}
     onSubmit={values => console.log(values)}
   >
     {({ onDateChange, handleBlur, handleSubmit, values }) => (
<View>
  <Text style={styles.selectDate}>Lab Collection Date</Text>
<DatePicker
    style={{width: 200, alignSelf: 'center'}}
    date={date}
    mode="date"
    placeholder="select date"
    format="DD MMM YYYY"
    minDate="01 Jan 2021"
    maxDate="30 Dec 2025"
    confirmBtnText="Confirm"
    cancelBtnText="Cancel"
    customStyles={{
      dateIcon: {
        position: 'absolute',
        left: 0,
        top: 4,
        marginLeft: 0
      },
      dateInput: {
        marginLeft: 36,
        borderRadius:4
      }
      // ... You can check the source to find the other keys.
    }}
   onDateChange={(newDate) => {setDate(newDate)}}
   value={values.date}
   onBlur={handleBlur('date')}
  />

    <Text style={styles.selectDate}>Symptom Onset Date</Text>
  <DatePicker
      style={{width: 200, alignSelf: 'center'}}
      date={date2}
      mode="date"
      placeholder="select date"
      format="DD MMM YYYY"
      minDate="01 Jan 2021"
      maxDate="30 Dec 2025"
      confirmBtnText="Confirm"
      cancelBtnText="Cancel"
      customStyles={{
        dateIcon: {
          position: 'absolute',
          left: 0,
          top: 4,
          marginLeft: 0
        },
        dateInput: {
          marginLeft: 36,
          borderRadius:4
        }
        // ... You can check the source to find the other keys.
      }}
     onDateChange={(newDate2) => setDate2(newDate2)}
     value={values.date2}
    />
<Button onPress={handleSubmit} title="Submit" />
    </View>
         )}
       </Formik>
  )
  };

  const styles = StyleSheet.create({
  selectDate:{
  fontFamily:'open-sans',
  fontSize:20,
  marginTop: 50,
  marginBottom:10,
  alignSelf:'center',
  color:'red'
  },
  datebox:{
  alignSelf:'center',
  height:50,
  width:500,
  }
  });



 export default App;

import React，{useState}来自“React”；
从“react native”导入{视图、文本、样式表、文本输入、按钮、警报}；
从'Formik'导入{Formik}；
从“react native DatePicker”导入日期选择器；
从“react native date input”导入{DateInput}；
const App=props=>{
const[date，setDate]=useState（新日期（））
const[date2，setDate2]=useState（新日期（））
返回(
console.log（值）}
>
{（{onDateChange，handleBlur，handleSubmit，values}）=>(
实验室收集日期
{setDate（newDate）}
value={values.date}
onBlur={handleBlur（'date'）}
/>
症状出现日期
setDate2（newDate2）}
value={values.date2}
/>
)}
)
};
const styles=StyleSheet.create({
选择日期：{
fontFamily:“开放式SAN”，
尺寸：20，
玛金托普：50，
marginBottom:10，
alignSelf:“中心”，
颜色：'红色'
},
日期框：{
alignSelf:“中心”，
身高：50，
宽度：500，
}
});
导出默认应用程序；

使用formik onDateChange中的setFieldValue（'date1'，value）来更改日期选择器

const-App=props=>{
const[date，setDate]=useState（新日期（））
const[date2，setDate2]=useState（新日期（））
返回(
console.log（值）}
>
{（{onDateChange，handleBlur，handleSubmit，setFieldValue，values}）=>(
实验室收集日期
{setFieldValue（'date'，newDate）}
value={values.date}
onBlur={handleBlur（'date'）}
/>
症状出现日期
setFieldValue（'date2'，newDate2）}
value={values.date2}
/>
)}
)
};
const styles=StyleSheet.create({
选择日期：{
fontFamily:“开放式SAN”，
尺寸：20，
玛金托普：50，
marginBottom:10，
对齐自我：“中心”，
颜色：“红色”
},
日期框：{
对齐自我：“中心”，
身高：50，
宽度：500，
}
});
导出默认应用程序谢谢！只是对您的代码做了一个小的更改，因为即使日志记录起作用，选择也没有改变：onDateChange={（newDate）=>{setFieldValue（'date'，newDate）；setDate（newDate）}}和onDateChange={（newDate2）=>{setFieldValue（'date2'，newDate2）；setDate2（newDate2）}现在也可以用于选择。希望这种方法很好，因为我得到了期望的结果。再次感谢！