>我有一个登录表单，当用户/密码不正确时，我调用一个函数在组件中制作动画，但此函数仅在我将用户/密码传递给我的 api 并且与数据库中的信息不匹配时才调用。我也想在表单无效时调用该函数(在转到我的 API 之前(。
我正在使用 formik lib 来验证我的表单，并因此显示消息错误，但我不知道如何让它调用我的动画函数。我的代码如下：
import React, { Component } from 'react'
import { connect } from 'react-redux'
import { login } from '../../store/actions/user'
import {
View,
Text,
Animated,
Easing
} from 'react-native'
import { Formik } from 'formik'
import AuthContainer from '../../components/Auth/AuthContainer'
import AuthTitle from '../../components/Auth/AuthTitle'
import AuthButton from '../../components/Auth/AuthButton'
import AuthInput from '../../components/Auth/AuthInput'
import AuthHeader from '../../components/Auth/AuthHeader'
import SpeechBubble from '../../components/Auth/SpeechBubble'
import { validationSchema } from './validationSchema'
import styles from '../../assets/css/styles'
class Login extends Component {
state = {
email: '',
password: '',
shakeAnimation: new Animated.Value(0)
}
componentDidUpdate = prevProps => {
if(prevProps.isLoading && !this.props.isLoading && this.props.token){
this.props.navigation.navigate('Main')
}
else if(this.props.loginError && this.props.isLoading){
this.handleAnimation()
}
}
login = () => {
this.props.onLogin({ ...this.state })
}
navigateToRegister = () => {
this.props.navigation.navigate('Register')
}
handleAnimation = () => {
Animated.sequence([
Animated.timing(this.state.shakeAnimation, { toValue: 10, duration: 80, useNativeDriver: true }),
Animated.timing(this.state.shakeAnimation, { toValue: -10, duration: 80, useNativeDriver: true }),
Animated.timing(this.state.shakeAnimation, { toValue: 10, duration: 80, useNativeDriver: true }),
Animated.timing(this.state.shakeAnimation, { toValue: 0, duration: 80, useNativeDriver: true })
]).start()
}
render(){
return (
<Formik
initialValues={{ email: '', password: '' }}
onSubmit={(values) => {
this.setState({ email: values.email, password: values.password })
this.login()
}}
validationSchema={validationSchema}
validateOnBlur={false}
validateOnChange={false} >
{formikProps => (
<AuthContainer>
<AuthHeader />
<SpeechBubble>
<Animated.View
style={{ transform: [{translateX: this.state.shakeAnimation}] }}>
<AuthTitle
text={
formikProps.errors.email ?
formikProps.errors.email :
formikProps.errors.password ?
formikProps.errors.password :
!this.props.loginError ?
'Olá! Cadastrou sua conta usando e-mail e senha? Insira-os aqui:' :
this.props.loginError}
styleTitle={!this.props.loginError && formikProps.isValid ? styles.bodyText :
[styles.bodyText, styles.bodyTextError]}/>
</Animated.View>
<AuthInput
placeholder='Seu e-mail'
keyboardType='email-address'
autoFocus={true}
autoCorrect={false}
autoCapitalize='none'
returnKeyType='next'
value={formikProps.values.email}
onChangeText={formikProps.handleChange('email')}
onBlur={formikProps.handleBlur('email')}
blurOnSubmit={false} />
<AuthInput
placeholder='Sua senha'
secureTextEntry={true}
returnKeyType='go'
value={formikProps.values.password}
onBlur={formikProps.handleBlur('password')}
onChangeText={formikProps.handleChange('password')} />
<AuthButton title='Entrar' onPress={formikProps.handleSubmit} />
<View style={styles.bodyBottom}>
<Text style={styles.bodyLink}>Esqueci minha senha</Text>
<Text style={styles.bodyLink} onPress={this.navigateToRegister}>
Ainda não cadastrei uma conta
</Text>
</View>
</SpeechBubble>
</AuthContainer>
)}
</Formik>
)
}
}
const mapStateToProps = ({ user }) => {
return {
isLoading: user.isLoading,
token: user.token,
loginError: user.loginError,
}
}
const mapDispatchToProps = dispatch => {
return {
onLogin: user => dispatch(login(user))
}
}
export default connect(mapStateToProps, mapDispatchToProps)(Login)
你传递formikProps.handleSubmit的地方，只需传递一个调用你的api的函数，并在调用后formikProps.handleSubmit
<AuthButton
title='Entrar'
onPress={() => {
// call what you want
// call formik handleSubmit after
formikProps.handleSubmit()
}}
/>