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

const PostEvent=（）=>{
//为简洁起见省略了代码。
返回(
{
firebase.firestore（）.collection（'PostedFunEvents'）。添加({
datePosted:values.datePosted.toDateString（），
description:values.description，
eventDate:date.toDateString（），
eventTime:date.toTimeString（），
位置：values.location，
标题：values.title，
用户：firebase.auth（）.currentUser.displayName，
userId:firebase.auth（）.currentUser.uid
});
resetForm（{值：'}）
}}> 
{props=>(
为活动选择一个地点
{
{props.values.location=data.description}
}}>     
{userName.currentUser.displayName}
单击下面的图标选择活动的时间和日期
时间
约会？
{show&&（）}
提交
)}
)
}

这个任务应该很琐碎，但我似乎无法让它工作。我看过很多教程和帖子，它们似乎都有相同的想法，那就是将回调重置函数传递给

组件的

onSubmit

属性。 有人知道我可以尝试什么吗

---

提前谢谢

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

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

常量初始值={
用户：userName.currentUser.displayName，
说明：“”，
datePosted:新日期（），
位置：“”，
事件日期：“”，
标题：“”
}
..
{
firebase.firestore（）.collection（'PostedFunEvents'）。添加({
datePosted:values.datePosted.toDateString（），
description:values.description，
eventDate:date.toDateString（），
eventTime:date.toTimeString（），
位置：values.location，
标题：values.title，
用户：firebase.auth（）.currentUser.displayName，
userId:firebase.auth（）.currentUser.uid
});
resetForm（{values:initialValues}）
}}> 

---

链接

感谢您抽出时间提供帮助。我按照上面的建议做了，但不幸的是，我仍然没有在表单中重置我的值。我想知道

组件是否会弄乱它？描述字段是否也不会重置Yes nothing reset。我特意尝试在描述中使用'values={props.values.description}'来检查值的呈现，但它根本没有重置。我在这里使用react做了一个示例演示，结果表明您的描述字段的属性不正确。应该是

value={props.values.description}

。这就是为什么它没有被清除。为了使重置生效，其他字段也需要值prop