在React Native中使用Formik时如何正确清空表单内容？

核心问题定位 #

你代码里存在两处明显错误，是导致resetForm调用后表单无反应的直接原因：

1. resetForm参数传递错误 #

你当前的resetForm传参写法是非法的：

// 错误写法：括号内逗号表达式最终返回空字符串，不是合法的配置对象
resetForm({ values: (values.fname = '', values.lname ='')})

resetForm方法如果要自定义重置后的值，需要传入完整的对象结构，如果你要重置到初始的空值状态，完全不需要手动传值，直接调用resetForm()即可，默认会自动回退到你定义的initialValues值。
如果确实需要自定义重置后的值，正确写法如下：

resetForm({ values: { fname: '', lname: '' } })

2. 自定义输入框绑定属性错误 #

你给MyTextInput绑定值的时候使用了values（复数）属性，而React Native输入框默认的绑定属性为value（单数），你自定义组件如果没有特殊处理的话，根本拿不到更新后的值，自然不会触发视图更新。
需要把两处输入框的属性名修正：

// 原错误写法
values = {values.fname || ''}
// 修正后
value = {values.fname || ''}

// 同理Last Name输入框也要改
value = {values.lname}

修正后完整示例代码 #

<Formik 
    initialValues = {{fname: '', lname:'' }}
    onSubmit = {async (values, {setSubmitting, resetForm}) => {
        // 直接调用即可，默认重置为initialValues
        resetForm()
        // 后续提交逻辑写在这里
        setSubmitting(false)
    }}
    >
    {({handleChange, handleBlur, handleSubmit, values, isSubmitting, resetForm}) => ( 
        <> 
            <View style={styles.style2}>
                
                <View style={styles.Form}>
                    
                    <MyTextInput
                        label           = "First Name" 
                        onChangeText    = {handleChange('fname')}
                        onBlur          = {handleBlur('fname')}
                        // 这里属性名改为单数value
                        value          = {values.fname || ''}
                        returnKeyType   = "next"
                        innerRef={input1}
                        onSubmitEditing = {() => input2.current.focus()}
                    />
                    <MyTextInput
                        label           = "Last Name" 
                        onChangeText    = {handleChange('lname')}
                        onBlur          = {handleBlur('lname')}
                        // 这里属性名改为单数value
                        value          = {values.lname}
                        returnKeyType   = "next"
                        refInner        = {input2} 
                    /> 
                </View> 

            </View>
            <View style={styles.ButtonsStyles}>
                
                <TouchableOpacity style={styles.StyleButton} onPress={handleSubmit} activeOpacity={0.85}>
                    <Text style={styles.Link}>
                        Next  ></Octicons>
                    </Text>  
                </TouchableOpacity>
                

            </View>

        </>
    )}
</Formik>

可选的其他重置方案 #

如果上述修正后还是有特殊场景需要重置表单，还可以使用以下两种方案：

• 直接调用setValues手动赋值：

setValues({ fname: '', lname: '' })

• 给Formik组件绑定动态key，需要重置时更新key触发组件重新挂载：

// 组件顶部定义key状态
const [formKey, setFormKey] = useState(0)

// Formik组件上绑定key
<Formik key={formKey} ...其他属性>

// 需要重置时修改key
setFormKey(prev => prev + 1)

内容的提问来源于stack exchange，提问作者Pedro