使用Formik反应本机表单不触发handle

Question

我正在使用Formik在React Native应用程序中构建表单。

当我单击按钮时，该表单不会触发handleSubmit ：

<ButtonLoading
    loading={isLoading || isSubmitting}
    label="Salvar"
    style={styles.button}
    onPress={handleSubmit}
/>

这是我填写此表单的完整代码：

 import React, { Component, Fragment } from 'react'; import { View, ScrollView } from 'react-native'; import { withFormik } from 'formik'; class Form extends Component { state = { isCepChecked: false, isLoading: false, isNewAddress: true, }; onChangeCep = () => { // Not related to the problem }; render() { const { isCepChecked, isLoading } = this.state, { values, errors, touched, setFieldValue, setFieldTouched, handleSubmit, isSubmitting, } = this.props; return ( <View style={styles.container}> <ScrollView style={styles.formContainer}> {!isCepChecked ? ( <Fragment> <View style={styles.lineContent}> <InputComponent label="Digite o CEP" name="nrCepPre" value={values.nrCepPre} error={errors.nrCepPre} touched={touched.nrCepPre} onTouch={setFieldTouched} onChange={setFieldValue} keyboardType="phone-pad" mask={'[00000]-[000]'} /> </View> <View style={styles.lineContent}> <ButtonLoading isLoading={isLoading || isSubmitting} label="Avançar" style={styles.button} onPress={() => this.onChangeCep()} /> </View> </Fragment> ) : ( <Fragment> <View style={styles.lineContent}> <InputComponent label="CEP" value={values.nrCep} mask={'[00000]-[000]'} editable={false} /> </View> <View style={styles.lineContent}> <InputComponent label="Identificação" name="dsEndereco" value={values.dsEndereco} error={errors.dsEndereco} touched={touched.dsEndereco} onTouch={setFieldTouched} onChange={setFieldValue} /> </View> <View style={styles.lineContent}> <ButtonLoading loading={isLoading || isSubmitting} label="Salvar" style={styles.button} onPress={handleSubmit} /> </View> </Fragment> )} </ScrollView> </View> ); } } export default withFormik({ mapPropsToValues: (props) => ({ nrCepPre: '', dsEndereco: '', nrCep: '', }), validationSchema: enderecoSchema, handleSubmit(values, customObject, bag) { console.warn('handle'); }, })(Form); 

Answer 1

为什么不在Form类中包含handleSubmit()函数，而是将其定义为_hanlderSubmit = (e) = {...}以便不需要对其进行绑定。 然后将其称为this._handleSubmit 。

您可以在这里找到更多关于箭头符号的信息https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Functions/Arrow_functions