在React Native中,要保持formik表单的值,可以通过以下步骤实现:
npm install formik
import React from 'react';
import { View, TextInput, Button } from 'react-native';
import { Formik } from 'formik';
const MyForm = () => {
return (
<Formik
initialValues={{ name: '', email: '' }}
onSubmit={values => console.log(values)}
>
{({ handleChange, handleSubmit, values }) => (
<View>
<TextInput
onChangeText={handleChange('name')}
value={values.name}
placeholder="Name"
/>
<TextInput
onChangeText={handleChange('email')}
value={values.email}
placeholder="Email"
/>
<Button onPress={handleSubmit} title="Submit" />
</View>
)}
</Formik>
);
};
export default MyForm;
在上面的代码中,我们使用Formik
组件来包裹表单的内容。initialValues
属性用于设置表单的初始值,onSubmit
属性用于处理表单提交时的逻辑。
import React, { useState } from 'react';
import { Button } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import MyForm from './MyForm';
const Stack = createStackNavigator();
const App = () => {
const [formValues, setFormValues] = useState({});
const handleFormSubmit = values => {
setFormValues(values);
// 处理表单提交逻辑
};
return (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen
name="Home"
component={MyForm}
initialParams={{ handleFormSubmit }}
/>
{/* 其他屏幕 */}
</Stack.Navigator>
</NavigationContainer>
);
};
export default App;
在上面的代码中,我们使用useState
来创建一个名为formValues
的状态,用于存储表单的值。在handleFormSubmit
函数中,我们将表单的值存储在formValues
状态中。
handleFormSubmit
函数传递给其他屏幕。在其他屏幕中,可以使用该函数来更新表单的值。import React from 'react';
import { View, Text, Button } from 'react-native';
const OtherScreen = ({ route }) => {
const { handleFormSubmit } = route.params;
const updateFormValues = () => {
const newValues = { name: 'John', email: 'john@example.com' };
handleFormSubmit(newValues);
};
return (
<View>
<Text>Other Screen</Text>
<Button onPress={updateFormValues} title="Update Form Values" />
</View>
);
};
export default OtherScreen;
在上面的代码中,我们通过route.params
获取到传递过来的handleFormSubmit
函数,并在updateFormValues
函数中使用它来更新表单的值。
这样,在导航到其他屏幕后,你可以通过调用handleFormSubmit
函数来更新表单的值。
没有搜到相关的沙龙
领取专属 10元无门槛券
手把手带您无忧上云