Как я могу запустить функцию в headerRight, используя Formik? - PullRequest
Новая
       9

Как я могу запустить функцию в headerRight, используя Formik?

3 голосов
/ 19 июня 2019

Я новичок в реакции-native и formik и столкнулся с проблемой, которую пытаюсь создать.

Как запустить функцию в headerRight с помощью Formik?У меня есть функция updateCorporation, которая будет запускать API-интерфейсы, и formik выполнит работу, чтобы запустить эту функцию, и после того, как я нажму кнопку «Обновить», но результаты не определены, я не понимаю, почему это происходит.

File_1.js 

const CorporationContainer = (props) => {
    const {
    navigation,
} = props;

const updateCorporation = (values) => {
    // do patch stuff with values
    // but its undefined
};

useEffect(() => {
    navigation.setParams({ updateCorporation: updateCorporation.bind() });
}, []);

return (
    <Corporation
        updateCorporation={updateCorporation} />
    );
};

CorporationContainer.navigationOptions = ({ navigation }) => ({
    headerRight: (
        <EditBtn
        onPress={() => navigation.state.params.updateCorporation()}
        >
        <EditText>Update</EditText>
        </EditBtn>
    ),
});

export default CorporationContainer;

File_2.js 

const Corporation = (props) => {
    const {
        updateCorporation,
    } = props;

    const emailField = useRef(null);

    const validationSchema = yup.object().shape({
        email: yup.string()
        .ensure()
        .email('Email must be valid')
        .required('Email'),
    });

    return (
        <Formik
            initialValues={{
                email,
            }}
            onSubmit={values => updateCorporation(values)}
            validateOnBlur={false}
            validateOnChange={false}
            validationSchema={validationSchema}
            >
        {(formProps) => {
            const {
            errors,
            setFieldValue,
            values,
            } = formProps;
            return (
                <Container>
                    <Input
                        name="email"
                        placeholder="Email Corporation"
                        textContentType="emailAddress"
                        keyboardType="email-address"
                        returnKeyType="done"
                        autoCapitalize="none"
                        autoCorrect={false}
                        ref={emailField}
                        value={values.email}
                        onChangeText={setFieldValue}
                        editable={!email}
                        error={errors.email}}
                    />
                </Container>
            );
        }}
        </Formik>
    );
};

export default Corporation;

Ответы [ 2 ]

1 голос
/ 24 июня 2019

В File_1.js мне пришлось использовать withForm, удалить все вещи Formik из File_2.js и использовать вместо этого реквизит. 

const CorporationContainer = (props) => {
    const {
        navigation,
        handleSubmit,
        errors,
        setFieldValue,
        values,
    } = props;

    useEffect(() => {
        navigation.setParams({ updateCorporation: handleSubmit.bind() });
    }, []);

    return (
        <ProfileProfessional
        errors={errors}
        setFieldValue={setFieldValue}
        values={values}
        />
    );
};

CorporationContainer.navigationOptions = ({ navigation }) => ({
headerRight: (
    <EditBtn
    onPress={() => navigation.state.params.updateCorporation()}
    >
    <EditText>Editar</EditText>
    </EditBtn>
),
});

export default withFormik({
    // ...
})(CorporationContainer);
0 голосов
/ 22 июня 2019

Автор Formik здесь ...

Не пробовал это и узнал точно, как работает привязка навигации, но вы хотите привязать submitForm() реквизита Formik к навигации, а не к функции updateCorporation,Тем не менее, вам нужно будет сделать это там, где у вас есть доступ к реквизитам / контексту Formik (т. Е. В качестве потомка <Formik>).

import React from 'react'
import { connect } from 'formik'

const updateCorporation = (values) => {
    // do patch stuff with values
    // but its undefined
};

const BindSubmit = connect(({ formik, navigation }) => {
  useEffect(() => {
    navigation.setParams({ updateCorporation: submitForm.bind() });
   }, []);
  return null
})


// ... and then just render it somewhere under Formik

const Corporation = () => {
 return (
   <Formik>
    <BindSubmit />
    {/* ... same */}
   </Formik>
 )
}
...