时间戳

首页 > 解决方案 > {React Native} 提交后重置 Formik 表单

reactjs - {React Native} 提交后重置 Formik 表单

问题描述

我在提交后无法重置我的表单。

这是我所拥有的

  const PostEvent = () =>{

        //Omitted code for brevity. 

return(
    <Formik
         initialValues ={{user: userName.currentUser.displayName, description: '',datePosted: new Date(), location: '', eventDate: '', title: ''}}
         onSubmit ={(values, {resetForm}) =>{
                 firebase.firestore().collection('PostedFunEvents').add({
                     datePosted: values.datePosted.toDateString(),
                     description: values.description, 
                     eventDate: date.toDateString(),
                     eventTime: date.toTimeString(),
                     location: values.location,
                     title: values.title,
                     user: firebase.auth().currentUser.displayName,
                     userId : firebase.auth().currentUser.uid
                     });
                 resetForm({values:''})
                 }}> 
         {props =>(

         <ScrollView keyboardShouldPersistTaps='always'>
         <DismissKeyBoard>
         <View style={{flex:1}}>
             <View  style={styles.form}><Text  style={styles.text}>Pick a place for the event</Text></View>
             <View style= {{paddingTop:20}}>
                 <GoogleAutocomplete 
                     placeholder = 'Insert place to post about '
                     onPress={(data, details = null) => {
                             {props.values.location = data.description}
                         }}>     
                 </GoogleAutocomplete>
             </View >

                <View style={styles.form}>    

                 <Text style={styles.text}>{userName.currentUser.displayName}</Text>
                 <TextInput
                     placeholder= 'Title of the event'
                     onChangeText = {props.handleChange('title')} 
                     style={styles.text}/>
                 <TextInput
                     placeholder= 'Description (e.g This is located...)'
                     multiline={true}
                     onChangeText = {props.handleChange('description')}
                     values = {props.values.description} 
                     style={styles.textBox}/>

                 <Text  style={styles.text} >Click on the below icons to pick a time and a date for the event</Text>

                 <DateTimeImage onPress={showTimepicker} name = 'alarm'>Time?</DateTimeImage> 
                 <DateTimeImage onPress={showDatepicker} name = 'calendar'>Date?</DateTimeImage> 

                  {show && (<DateTimePicker onChange={onChange} value = {date} mode = {mode}></DateTimePicker>)}

                 <Button onPress={props.handleSubmit}>Submit</Button>

                 </View>    

         </View>       
         </DismissKeyBoard>     
         </ScrollView>
         )}
     </Formik> 
 )
}

这项任务应该是微不足道的，但我似乎无法让它工作。看了很多教程和SO帖子，似乎都有一个相同的想法，就是给组件的onSubmitprop传递一个回调reset函数<Formik>。有人知道我可以尝试什么吗？

提前致谢。

标签： reactjsreact-nativeformik

解决方案

当您重置表单时，值应该是 initialValues 的格式。您可以将 initalValues 作为对象取出并将其传递给重置表单

const initialValues = {
      user: userName.currentUser.displayName, 
      description: '',
      datePosted: new Date(), 
      location: '', 
      eventDate: '', 
      title: ''
}

..
<Formik
     initialValues ={initialValues}
     onSubmit ={(values, {resetForm}) =>{
             firebase.firestore().collection('PostedFunEvents').add({
                 datePosted: values.datePosted.toDateString(),
                 description: values.description, 
                 eventDate: date.toDateString(),
                 eventTime: date.toTimeString(),
                 location: values.location,
                 title: values.title,
                 user: firebase.auth().currentUser.displayName,
                 userId : firebase.auth().currentUser.uid
                 });
             resetForm({values: initialValues})
             }}>

链接的github问题

推荐阅读