如何解决停止handleBlur做任何事情
在我的Formik表单中,当我单击搜索按钮时,将显示项目列表(UsersFoundList)。此列表在表单外部,并且列表中的每个项目都有其自己的按钮。
当我第一次单击列表中的任何按钮时,它们将不起作用。相反,会触发我的表单的handleBlur ,并且由于输入字段为空,因此错误消息开始在输入字段下方显示。因此,该按钮没有执行第一次尝试时应执行的操作。我通过将控制台日志写入其中来测试handleBlur。
仅当我尝试再次提交表单时,才会出现此错误。当我单击其他任何东西时都不会。
const [showFlatList,setShowFlatList] = useState(false);
const handleSubmitForm = (
values: FormValues,helpers: FormikHelpers<FormValues>,) => {
console.log('hello',values.input)
setShowFlatList(true);
helpers.resetForm();
};
return (
<View style={styles.container}>
<View >
<Formik
initialValues={initialValues}
onSubmit={handleSubmitForm}
validationSchema={addRelationValidationSchema}>
{({ 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}>
<NewButton buttonText="Suchen" onPress={handleSubmit} />
</View>
</View>
)}
</Formik>
</View>
<View style={styles.listHolder}>
{showFlatList && (
<UsersFoundList/>
)}
</View>
</View>
);
如果在电话上运行 codesandbox ,您会看到问题:
https://snack.expo.io/@nhammad/jealous-beef-jerky
我需要停止handleBlur做任何事情。如果我单击列表中的a按钮,则它应该在第一次尝试时起作用,而不是触发handleBlur。即使我添加validateOnBlur=false
,问题仍然存在。在这种情况下,错误消息不会显示,但在第一次尝试时该按钮仍然无法使用。
我单击的按钮具有单独的功能。并且此按钮在表单外部,因此它应该执行原本应该执行的操作,而不是在onBlur(在沙箱中:仅用于打印)中执行任何操作。
解决方法
在FieldInput
定义中,您在onBlur
每次渲染时都调用该函数。
为防止这种情况发生,您可以使用箭头功能,React仅在模糊时渲染该箭头功能
onBlur={(fieldType) => handleBlur(fieldType)}
您可以在React.js文档中找到更详细的解释:
https://reactjs.org/docs/faq-functions.html
,onBlur
是使用 Formik 的默认行为。无论您是否点击表单外的内容,它都会在您聚焦一个字段时触发。
并且 onBlur
将在任何 onClick
事件之前触发。
不过有几个解决方法。
- 使用 onMouseDown (& onKeyDown) 代替 onClick
基本上,onMouseDown
会在 onBlur
之前被调用。
在此处查看示例实现:https://github.com/formium/formik/issues/2062
<a
href="#back-to-previous"
onMouseDown={onClick}
onKeyUp={(e) => {
e.key === 'Enter' && onClick(e);
}}
>
onKeyDown
是为了可访问性,您应该检查按下的是 Enter 键,而不是任意键。
- 覆盖 onBlur 并有条件地调用 formik onBlur
这可能听起来很老套,但它可能适合某些场景。
示例:
onBlur={(e) => {
const wasLinkClicked = e.relatedTarget && e.relatedTarget.tagName === 'A';
if (!wasLinkClicked) {
handleBlur(e);
}
}}
该代码检查您是否点击了链接。在你的例子中,你可以写一个不同的逻辑:“是表单内被点击的按钮吗?”。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。