如何解决触摸的属性未重置
我有一个Formik表单,我可以在其中输入用户输入并在提交后运行查询。
当我单击搜索按钮时,将显示一个列表。所有列表项都有自己的按钮。当我第一次单击绿色的添加按钮(从列表项中)时,该按钮不起作用。控制台日志的内容未打印。相反,将触发inputField的onBlur事件。但是,如果我再次单击+按钮,那么它将起作用并且不会打印。该问题在模拟器/电话中可见,而在沙盒上的Web模式中则不可见。
export const AddFriendScreen: React.FunctionComponent = () => {
const initialValues: FormValues = {
input: '',};
const [showFlatList,setShowFlatList] = useState<UsersLazyQueryHookResult>(
'',);
const handleSubmitForm = (
values: FormValues,helpers: FormikHelpers<FormValues>,) => {
loadUsers({
variables: {
where: {
OR: [
{ phoneNumber: newPhoneNumber },],},});
helpers.resetForm();
};
return (
<SafeAreaView style={styles.safeAreaViewContainer}>
<View style={styles.searchTopContainer}>
<View style={styles.formContainer}>
<Formik
initialValues={initialValues}
onSubmit={handleSubmitForm}
validationSchema={validationSchema}>
{({ handleChange,handleBlur,handleSubmit,values }) => (
<View style={styles.searchFieldContainer}>
<View style={styles.form}>
<FieldInput
handleChange={handleChange}
handleBlur={handleBlur}
value={values.input}
fieldType="input"
icon="user"
placeholderText="E-Mail oder Telefonnummer oder Name"
/>
<ErrorMessage
name="input"
render={(msg) => <ErrorText errorMessage={msg} />}
/>
</View>
<View style={styles.buttonContainer}>
<ActionButton buttonText="Suchen" onPress={handleSubmit} />
</View>
</View>
)}
</Formik>
</View>
<View style={styles.listHolder}>
{data && showFlatList !== null && (
<UsersFoundList
data={data}/>
)}
</View>
</View>
</SafeAreaView>
);
};
零食博览会:
https://snack.expo.io/@nhammad/jealous-beef-jerky
[![在此处输入图片描述] [1]] [1]
编辑:
找到了一种解决方法,但仍然可以使用更简单的解决方案。仍然没有弄清楚到底是什么原因造成的。
解决方法
但是,这将导致在提交表单并返回/呈现数据后立即显示formik错误。例如,错误提示输入字段不应为空。
...
为什么键盘会干扰这一点?
可能是因为当您调用Keyboard.dismiss()
时,实际上是在使输入失去焦点,这将触发validateOnBlur
事件。
因此,当您取消关注某个字段(模糊)时,它将尝试验证(validateOnBlur
),并且由于该字段为空,因此将显示验证。
仅当我们尝试重新提交没有输入内容的表单时,错误才会显示。
如果仅当您提交表单时才显示错误,则应传递到Formik
组件validateOnBlur={false}
。这样,在您调用Keyboard.dismiss()
时它不会显示错误消息,因为它将删除模糊时的验证。
但是它仍然验证输入何时发生更改,从而触发validateOnChange
。您还可以传递到Formik
组件validateOnChange={false}
来禁用对更改的验证,并且仅在您提交表单(按按钮)时验证。
请注意,validateOnChange
和validateOnBlur
默认为true
。
编辑:
您需要添加validateOnBlur={false}
,但无需调用Keyboard.dismiss()
,而需要调用fieldRef.current.blur()
。但是要使其正常工作,您需要在输入组件中使用React.forwardRef
。
因此您需要创建fieldRef
const fieldRef = useRef();
传递给组件
<FieldInput
ref={fieldRef} // passing the ref
handleChange={handleChange}
handleBlur={handleBlur}
value={values.input}
fieldType="input"
icon="user"
placeholderText="input"
/>
您需要用FieldInput
包裹React.forwardRef
并将ref
传递给Input
组件。
// wrapping the component with React.forwardRef
export const FieldInput: React.FunctionComponent<FieldInputProps> = React.forwardRef(({
handleChange,handleBlur,fieldType,placeholderText,value,style,rounded,//ref,},ref) => {
return (
<Item rounded={rounded} style={[styles.inputItem,style]}>
<Input
ref={ref} // passing the ref
autoFocus={true}
autoCapitalize="none"
style={styles.inputField}
placeholder={placeholderText}
keyboardType="default"
onChangeText={handleChange(fieldType)}
onBlur={handleChange(fieldType)}
value={value}
/>
</Item>
);
});
现在在handleSubmitForm
中,您致电fieldRef.current.blur()
const handleSubmitForm = (
values: FormValues,helpers: FormikHelpers<FormValues>,) => {
// other logic from your submit
if (fieldRef && fieldRef.current)
fieldRef.current.blur();
};
以此,您将解决问题和评论中的问题。
关于useRef
的解释
我们需要使用useRef
钩子,以便我们可以获取Input
组件的元素以能够调用blur
函数,因此不要专注于输入和可以单击加号按钮。
我们需要使用useRef
钩子,因为这是您在功能组件中创建ref
的方式。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。