022.formik表单使用

• 导入

yarn add formik
yarn add yup
yarn add -D @types/yup

• Formik 使用

import { RootStackNavigation, RootStackParamList } from '@/navigator/index';
import { pTd } from '@/utils/index';
import { RouteProp } from '@react-navigation/native';
import { Field, Formik, FormikHelpers } from 'formik';
import React, { Component } from 'react';
import { Button, ScrollView, StyleSheet, Text, View, DeviceEventEmitter } from 'react-native';
import * as Yup from 'yup';
import { postLogin } from './service'
import storage from '@/config/storage';import InputItem from './component/inputitem';import type { ParamsType } from './data'type Iprops = {route: RouteProp<RootStackParamList, 'Login'>,navigation: RootStackNavigation
}
type IState = {loading: boolean
}
//校验规则
const customervalidation = Yup.object().shape({account: Yup.string().required('请输入账号'),password: Yup.string().required('请输入密码'),
});class Login extends Component<Iprops, IState>{state = {loading: false}initialValues: ParamsType = {account: '',password: '',};onSubmit = (values: ParamsType, actions: FormikHelpers<ParamsType>) => {const { navigation } = this.propsthis.setState({loading: true})postLogin({ ...values }).then(res => {actions.setSubmitting(false);const { data } = resstorage.save({key: 'userInfo',data: JSON.stringify(data)}).then(res => {DeviceEventEmitter.emit('userInfo', {})navigation.goBack()})}).catch(err => {}).finally(() => {this.setState({loading: false})})}render() {const { loading } = this.statereturn (//keyboardShouldPersistTaps 键盘遮挡问题<ScrollView keyboardShouldPersistTaps='handled' style={styles.container}><Text style={styles.logo}>听书</Text><FormikinitialValues={this.initialValues}onSubmit={this.onSubmit}validationSchema={customervalidation}>{({ values, handleChange, handleBlur, handleSubmit }) => {return (<View style={styles.inputContainer}><Fieldname="account"placeholder="请输入账号"component={InputItem}/><Fieldname="password"placeholder="请输入密码"secureTextEntrycomponent={InputItem}/><View style={styles.botton}><Buttondisabled={loading}onPress={handleSubmit}title="登录"color="#ff4000"/></View></View>)}}</Formik></ScrollView>);}
}
const styles = StyleSheet.create({container: {flex: 1,paddingBottom: pTd(200),},logo: {color: '#ff4000',fontWeight: 'bold',fontSize: 50,textAlign: 'center',marginTop: 40,},inputContainer: {marginTop: pTd(50),marginLeft: pTd(50),marginRight: pTd(50),},input: {height: 40,paddingHorizontal: 10,borderColor: '#ccc',borderBottomWidth: StyleSheet.hairlineWidth,},botton: {marginTop: pTd(120)}
});
export default Login;

• InputItem 组件

import { FieldInputProps, FormikProps } from 'formik';
import React, { PureComponent } from 'react';
import { StyleSheet, Text, TextInput, View, TextInputProps } from 'react-native';interface IProps extends TextInputProps {field: FieldInputProps<any>,form: FormikProps<any>
}class InputItem extends PureComponent<IProps>{render() {const { form, field, ...rest } = this.props;return (<View style={styles.container}><TextInputstyle={styles.input}onChangeText={form.handleChange(field.name)}onBlur={form.handleBlur(field.name)}value={form.values[field.name]}{...rest}/><View><Text style={styles.error}>{form.touched[field.name] && form.errors[field.name]}</Text></View></View>);}
}const styles = StyleSheet.create({container: {marginVertical: 10,},input: {height: 40,paddingHorizontal: 10,borderColor: '#ccc',borderBottomWidth: StyleSheet.hairlineWidth,},error: {position: 'absolute',color: 'red',marginTop: 5,marginLeft: 10,fontSize: 12,},
});export default InputItem;

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！