TextInput 上的 onChange 在 Formik 中不起作用 [英] onChange on TextInput Not Working Inside Formik
问题描述
通常
允许您输入,即使您只是指定一个占位符.但是,在 Formik 表单中使用时,我无法在表单中键入和验证任何内容.我做错了什么?
Generally <TextInput>
allows you to type even when you're just specifying a placeholder. However, when using within the Formik form, I am unable to type and validate anything in my form. What am I doing wrong?
我已经尝试了 onChangeText
和 setFieldValue
和 handleChange
两者.
I have tried onChangeText
with setFieldValue
and handleChange
both.
const initialValues: FormValues = {
friendEmail: '',
};
export const Page: React.FunctionComponent<Props> = ({
toggleShowPage,
showPage,
}) => {
const validationSchema = emailValidationSchema;
const getFriendId = React.useCallback(
(data: any) => {
//console.log('Email', initialValues.friendEmail);
if (data) {
if (data.users.nodes.length == 0) {
...
} else {
addFriend(Number(data.users.nodes[0].id));
}
}
},
[addFriend],
//[friendEmail, addFriend],
);
const [loadUsers] = useUsersLazyQuery({
onCompleted: getFriendId,
onError: _onLoadUserError,
});
const handleSubmitForm = React.useCallback(
(values: FormValues, helpers: FormikHelpers<FormValues>) => {
console.log('Submitted');
loadUsers({
variables: {
where: { email: values.friendEmail },
},
});
//setFriendEmail('');
values.friendEmail = '';
},
[loadUsers],
//[loadUsers, friendEmail]
);
return (
<Modal
visible={showPage}
animationType="slide"
transparent={true}>
<SafeAreaView>
<View>
<View>
<View>
<Formik
initialValues={initialValues}
onSubmit={handleSubmitForm}
validationSchema={validationSchema}>
{({
handleChange,
setFieldValue,
setFieldTouched,
handleBlur,
handleSubmit,
isSubmitting,
values,
}) => {
const setEmail = (friendEmail: string) => {
setFieldValue('friendEmail', friendEmail)
setFieldTouched('friendEmail', true, false);
}
return(
<Form>
<View>
<View>
<Item>
<TextInput
placeholder="Email"
onChangeText={setEmail}
//onChangeText={handleChange}
//onChangeText={handleChange('friendEmail')}
//onChangeText={e => console.log('Workinggg')}
//onBlur={handleBlur('friendEmail')}
//value={values.friendEmail}
autoCapitalize="none"
/>
</Item>
</View>
<View>
<Button
onPress={handleSubmit}>
<Text>
Add{' '}
</Text>
</Button>
</View>
</View>
</Form>
)}}
</Formik>
</View>
</View>
</View>
</SafeAreaView>
</Modal>
);
};
如何修复 textInput 以使输入和验证正常工作?
How can I fix the textInput to make the typing and validation work?
根据这个:https://jaredpalmer.com/formik/docs/guides/react-native
我们不需要使用 name 属性.我也用过这个 onChangeText 但还是写不出来.
We don't need to use the name property. I have used this onChangeText too but I still can't write anything.
推荐答案
在你的情况下,如果你的 TextInput
在第一个参数处返回值,就像你使用的那样.但是您错误地将 name
赋予字段:
In your case if your TextInput
returns value at first parameter like you use all right. But you mistake give name
to field:
<TextInput
name="friendEmail"
placeholder="Email"
onChangeText={setEmail}
autoCapitalize="none"
/>
Formik
如果您不为字段指定名称,则不知道在哪里设置您的值.你也可以这样做:
Formik
doesn't know where to set your value if you don't give name to field.
And also you can do like:
<TextInput
name="friendEmail"
placeholder="Email"
onChangeText={(val) => {
setFieldValue('friendEmail', val)
setFieldTouched('friendEmail', true, false);
}
autoCapitalize="none"
/>
我的建议是修改或编写 TextInput
的包装器.并且字段应该返回onChange
第一个参数name
,第二个value
.它会更有用.您可以在官方 docs 上阅读有关您的问题的更多信息.
My advice is to modify or write wrapper for TextInput
. And field should return onChange
first parameter name
, and second value
. It will be more useful.
And you can read more about your problem on official docs.
这篇关于TextInput 上的 onChange 在 Formik 中不起作用的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!