#reactjs #react-native #formik #react-navigation-v5
#reactjs #react-native #formik #react-navigation-v5
Вопрос:
Я следовал этому примеру в документах react-navigation, и handleSubmit из формы Formik в основном onPress={handleSubmit}
не обрабатывается.
React.useLayoutEffect(() => {
navigation.setOptions({
headerRight: () => <Button onPress={handleSubmit} title='Update' />,
});
}, [navigation]);
const handleSubmit = (values: IUser) => {
setLoadingVisible(true);
updateAccountDetails(values);
setUser(values);
};
<Form
initialValues={{
id: user.id,
name: user.name,
email: user.email,
address: user.address,
}}
onSubmit={handleSubmit}
validationSchema={accountDetailsValidationSchema}
>
Ответ №1:
В <Form/>
react-native formik нет компонента https://formik.org/docs/guides/react-native#the-gist
также вы можете добавить компонент button с layoutEffect в отдельный компонент в качестве дочернего элемента
<Formik
initialValues={{ email: '' }}
onSubmit={handleSubmit}>
{({ handleChange, handleBlur, handleSubmit, values }) => (
<View>
<TextInput
onChangeText={handleChange('email')}
onBlur={handleBlur('email')}
value={values.email}
/>
<HeaderButton onSubmit={handleSubmit} navigation={navigation}/>
</View>
)}
добавьте эффект компоновки к <HeaderButton/>
const HeaderButton = ({ handleSubmit, navigation }) => {
React.useLayoutEffect(() => {
navigation.setOptions({
headerRight: () => <Button onPress={handleSubmit} title='Update' />,
});
}, [navigation, handleSubmit]);
return (<></>);
}