React-native-datepicker with Formik

xv8emn3q 于 6个月前发布在 React

关注(0)|答案(2)|浏览(73)

我尝试使用Formik在表单提交时从React-native-datepicker获取值，然而，我只得到空值，似乎无法弄清楚如何传递值。我对react-native和Formik相当陌生，希望得到任何帮助。我只是试图在表单提交时记录结果。我也尝试过react hook form，但没有太大成功。
我的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;

字符串

react-native

来源：https://stackoverflow.com/questions/66148927/react-native-datepicker-with-formik

2条答案

按热度按时间

monwx1rj1#

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

字符串

赞(0）回复(0）举报 6个月前

z3yyvxxp2#

我以一种适合我的方式处理了这个挑战。虽然我不确定这是否是最传统的解决方案，但它确实解决了这个问题，并为我提供了一个增强代码的机会。

const handleConfirm = useCallback((_, selectedDate): void => {
    setShowDatePicker(false);
    if (selectedDate) {
        props.setFieldValue('dob', new Date(selectedDate));
    }
}, [props]);

return (
    <Box>
        <Pressable onPress ={ (): void => setShowDatePicker(true) } >
            <Input isReadOnly name={props.name}>
                <InputField
                    value={showDateValue ? '' : currentDate.toDateString()}
                    onPressIn={(): void => setShowDatePicker(true)}
                    placeholder={props.placeholder} />
            </Input>
        </Pressable>
        {
            showDatePicker ?
                <DateTimePickerModal value={ props.value } display='spinner' onChange={handleConfirm} /> : null
        }
    </Box>
);

字符串
我把这个日期选择器作为UI工具包，这样我就可以直接在我的项目中使用它，我从formik传递了setFieldValue

赞(0）回复(0）举报 6个月前

我来回答

React-native-datepicker with Formik

2条答案

相关问题

热门标签

最新问答