我正在使用Formik在React Native应用程序中构建一个表单。
当我单击按钮时,表单不会触发handleSubmit
:
<ButtonLoading
loading={isLoading || isSubmitting}
label="Salvar"
style={styles.button}
onPress={handleSubmit}
/>
这是我此表单的完整代码:
import React, { Component, Fragment } from 'react';
import { View, ScrollView } from 'react-native';
import { withFormik } from 'formik';
class Form extends Component {
state = {
isCepChecked: false,
isLoading: false,
isNewAddress: true,
};
onChangeCep = () => {
// Not related to the problem
};
render() {
const { isCepChecked, isLoading } = this.state,
{
values,
errors,
touched,
setFieldValue,
setFieldTouched,
handleSubmit,
isSubmitting,
} = this.props;
return (
<View style={styles.container}>
<ScrollView style={styles.formContainer}>
{!isCepChecked ? (
<Fragment>
<View style={styles.lineContent}>
<InputComponent
label="Digite o CEP"
name="nrCepPre"
value={values.nrCepPre}
error={errors.nrCepPre}
touched={touched.nrCepPre}
onTouch={setFieldTouched}
onChange={setFieldValue}
keyboardType="phone-pad"
mask={'[00000]-[000]'}
/>
</View>
<View style={styles.lineContent}>
<ButtonLoading
isLoading={isLoading || isSubmitting}
label="Avançar"
style={styles.button}
onPress={() => this.onChangeCep()}
/>
</View>
</Fragment>
) : (
<Fragment>
<View style={styles.lineContent}>
<InputComponent
label="CEP"
value={values.nrCep}
mask={'[00000]-[000]'}
editable={false}
/>
</View>
<View style={styles.lineContent}>
<InputComponent
label="Identificação"
name="dsEndereco"
value={values.dsEndereco}
error={errors.dsEndereco}
touched={touched.dsEndereco}
onTouch={setFieldTouched}
onChange={setFieldValue}
/>
</View>
<View style={styles.lineContent}>
<ButtonLoading
loading={isLoading || isSubmitting}
label="Salvar"
style={styles.button}
onPress={handleSubmit}
/>
</View>
</Fragment>
)}
</ScrollView>
</View>
);
}
}
export default withFormik({
mapPropsToValues: (props) => ({
nrCepPre: '',
dsEndereco: '',
nrCep: '',
}),
validationSchema: enderecoSchema,
handleSubmit(values, customObject, bag) {
console.warn('handle');
},
})(Form);
为什么不在 Form 类中包含您的 handleSubmit()
func,而是将其定义为 _hanlderSubmit = (e) = {...}
这样就不需要绑定它。然后就叫它this._handleSubmit
您可以在此处找到有关箭头符号的更多信息 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions