停止handleBlur做任何事情 [英] stop handleBlur from doing anything

问题描述

在我的Formik表单中，当我单击搜索按钮时，将显示项目列表(UsersFoundList).此列表在表单之外，并且列表中的每个项目都有其自己的按钮.

In my Formik form, when I click on the search button, a list of items is rendered (UsersFoundList). This list is outside the form and each item in the list has a button of its own.

当我第一次单击列表中的任何按钮时，它们将不起作用.相反，会触发我的表单的handleBlur ，并且由于输入字段为空，因此错误消息开始在输入字段下方显示.因此，该按钮没有执行第一次尝试时应执行的操作.我通过将控制台日志写入其中来测试了handleBlur.

When I click on any of those buttons from the list for the first time, they don't work. Instead, the handleBlur of my form is triggered and since the input field is empty, an error messages starts showing under the input field. So, the button doesn't do what it's supposed to do in the first attempt. I tested the handleBlur by writing a console log into it.

仅当我尝试再次提交表单时，才会出现此错误.当我单击其他任何东西时都不会.

This error should only show up when I am trying to submit the form again. Not when I click on anything else.

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 ，您会看到问题:

If you run the codesandbox on a phone, you can see the problem:

https://snack.expo.io/@nhammad/jealous-beef-生涩

我需要停止handleBlur做任何事情.如果我单击列表中的a按钮，则它应该在第一次尝试时起作用，而不是触发handleBlur.即使我添加 validateOnBlur = false ，问题仍然存在.在这种情况下，错误消息不会显示，但在第一次尝试时按钮仍然无法使用.

I need to stop the handleBlur from doing anything. If I click on the a button from the list, it should work on the very first attempt instead of triggering the handleBlur. The problem still exists even if I add validateOnBlur=false. In this case, the error message doesn't show up but the button still doesn't work on the first attempt.

我单击的按钮具有单独的功能.并且此按钮在表单外部，因此它应该执行原本应该执行的操作，而不是在onBlur(在沙箱中:仅用于打印)中执行任何操作.

The button that I click has a separate function. and this button is outside the form so it should do what it's originally supposed to do instead of doing anything in the onBlur(in the sandbox: it's just printing).

推荐答案

onBlur 是使用Formik的默认行为.无论您是否单击表单外的内容，它都会触发是否聚焦于某个字段.

onBlur is the default behavior using Formik. It will trigger if you were focusing a field, no matter if you click on something outside the form or not.

onBlur 将在任何 onClick 事件之前触发.

And onBlur will trigger before any onClick event.

不过有两种解决方法.

1. 使用onMouseDown(& onKeyDown)代替onClick

基本上，将在 onBlur 之前调用 onMouseDown .在此处查看示例实现: https://github.com/formium/formik/issues/2062

Basically, onMouseDown will be called before onBlur. See an example implementation here: https://github.com/formium/formik/issues/2062

<a
    href="#back-to-previous"
    onMouseDown={onClick}
    onKeyUp={(e) => {
      e.key === 'Enter' && onClick(e);
    }}
>

onKeyDown 在那里具有可访问性，您应该检查被按下的Enter键是Enter键，而不仅仅是任何键.

onKeyDown is there for accesibility, and you should check that is the Enter key the one being pressed, not just any key.

1. 覆盖onBlur并有条件地调用formik onBlur

这听起来似乎很hacky，但可能适合某些情况.

This may sound hacky, but it could fit some scenarios.

示例:

onBlur={(e) => {
  const wasLinkClicked = e.relatedTarget && e.relatedTarget.tagName === 'A';
   if (!wasLinkClicked) {
      handleBlur(e);
  }
}}

该代码检查您是否正在单击链接.在您的情况下，您可以编写不同的逻辑:表单中的单击按钮是否在其中?".

That code checks wether you are clicking a link. In your case, you could write a different logic: "was the clicked button inside the form?".

这篇关于停止handleBlur做任何事情的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！