react-native - 使用 Formik 反应原生日期选择器
问题描述
我正在尝试使用 Formik 在表单提交时从 React-native-datepicker 获取值,但是,我只得到空,似乎无法弄清楚如何传递这些值。我对 react-native 和 Formik 还很陌生,如果有任何帮助,我将不胜感激。我只是想在表单提交中记录结果。我也尝试过反应钩子形式,但没有取得多大成功。
我的 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;
解决方案
使用来自 DatePicker 的 formik onDateChange 的 setFieldValue('date1', value)。
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, setFieldValue, 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) => { setFieldValue('date', 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) => setFieldValue('date2', 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;
推荐阅读
- angular - 找不到“管道”编号
- symfony - symfony 3.4 学说 COUNT
- javascript - 页面刷新时自动运行进度条(自动)
- asp.net-core - 使用 asp.net 核心通过 twilio 向 whatsapp 组发送消息
- java - 显示没有像它应该的那样改变,但代码看起来很好?
- php - 通过 Ajax POST 请求下载文件时出错
- c# - 获取菜单选项的句柄
- neo4j - 无效的输入“r”:预期的“t/T”
- networking - 如何在外部公共 IP 地址上对连接到服务器的 POD 的源 IP 地址进行 NAT?
- swift - 在 Swift 中使用带有 CocoaPods 的静态库对于 Realm 失败