Реагируй на родную форму с Formik, не стреляя из ручкиSubmit - PullRequest
Новая
       6

Реагируй на родную форму с Formik, не стреляя из ручкиSubmit

0 голосов
/ 01 февраля 2019

Я создаю форму в приложении React Native с использованием Formik.

Форма не запускает 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);

1 Ответ

0 голосов
/ 01 февраля 2019

Почему бы не включить ваш handleSubmit() func в ваш класс Form, определив его как _hanlderSubmit = (e) = {...}, чтобы не было необходимости связывать его.Тогда просто назовите его как this._handleSubmit.

Более подробную информацию о стрелке вы можете найти здесь https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions

...