使用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

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

可以找到更多关于这里箭头符号https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions