react-native - 如何使用 Formik 在 headerRight 中触发函数?
问题描述
我是 react-native 和 formik 的新手,我遇到了我正在尝试建立的这个问题。
如何使用 Formik 在 headerRight 中触发函数?我有 updateCorporation 函数,它会触发 api,formik 会触发这个函数,在我按下更新按钮后,但结果未定义,我不明白为什么会这样。
File_1.js
const CorporationContainer = (props) => {
const {
navigation,
} = props;
const updateCorporation = (values) => {
// do patch stuff with values
// but its undefined
};
useEffect(() => {
navigation.setParams({ updateCorporation: updateCorporation.bind() });
}, []);
return (
<Corporation
updateCorporation={updateCorporation} />
);
};
CorporationContainer.navigationOptions = ({ navigation }) => ({
headerRight: (
<EditBtn
onPress={() => navigation.state.params.updateCorporation()}
>
<EditText>Update</EditText>
</EditBtn>
),
});
export default CorporationContainer;
文件_2.js
const Corporation = (props) => {
const {
updateCorporation,
} = props;
const emailField = useRef(null);
const validationSchema = yup.object().shape({
email: yup.string()
.ensure()
.email('Email must be valid')
.required('Email'),
});
return (
<Formik
initialValues={{
email,
}}
onSubmit={values => updateCorporation(values)}
validateOnBlur={false}
validateOnChange={false}
validationSchema={validationSchema}
>
{(formProps) => {
const {
errors,
setFieldValue,
values,
} = formProps;
return (
<Container>
<Input
name="email"
placeholder="Email Corporation"
textContentType="emailAddress"
keyboardType="email-address"
returnKeyType="done"
autoCapitalize="none"
autoCorrect={false}
ref={emailField}
value={values.email}
onChangeText={setFieldValue}
editable={!email}
error={errors.email}}
/>
</Container>
);
}}
</Formik>
);
};
export default Corporation;
解决方案
在 File_1.js 中,我必须使用withForm
和删除 File_2.js 中的所有 Formik 东西,并改用道具。
const CorporationContainer = (props) => {
const {
navigation,
handleSubmit,
errors,
setFieldValue,
values,
} = props;
useEffect(() => {
navigation.setParams({ updateCorporation: handleSubmit.bind() });
}, []);
return (
<ProfileProfessional
errors={errors}
setFieldValue={setFieldValue}
values={values}
/>
);
};
CorporationContainer.navigationOptions = ({ navigation }) => ({
headerRight: (
<EditBtn
onPress={() => navigation.state.params.updateCorporation()}
>
<EditText>Editar</EditText>
</EditBtn>
),
});
export default withFormik({
// ...
})(CorporationContainer);
推荐阅读
- python - 使用 dict-comprehension 复制嵌套的 for 循环
- android - 如何在没有“org.gradle.execution.MultipleBuildFailures”错误/异常的情况下在 android studio 中使用谷歌材料设计库
- django - Django ORM。如何排除旧数据?
- haskell - 理解 <$> 运算符
- placement - 摩根士丹利6个月实习(校内)能力倾向测试都问了哪些问题?
- meteor-blaze - 如何通过 nginx 反向代理返回特定位置的 Meteor Blaze 内容
- python - 如何修改我的代码以查找具有特定类的所有标签的所有特定属性
- python - 如何生成 WM_SEC.AUTH_SIGNATURE?
- java - Java 输入缓冲区和 do-while 循环行为(为什么它检查第一个字符 3 次?)
- excel - 优化后VBA Loop仍然运行缓慢