Javascript 阻止车把司机做任何事

在我的Formik表单中，当我单击搜索按钮时，将呈现一个项目列表（UsersFoundList）。此列表在表单之外，列表中的每个项目都有自己的按钮

当我第一次单击列表中的任何按钮时，它们都不起作用。相反，我的表单的把手被触发，由于输入字段为空，因此在输入字段下开始显示错误消息。所以，这个按钮在第一次尝试时并没有完成它应该做的事情。我通过在手柄中写入控制台日志来测试手柄

只有当我再次尝试提交表单时，才会出现此错误。当我点击其他任何东西的时候

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>
  );

const[showFlatList，setShowFlatList]=useState（false）；
常量handleSubmitForm=(
价值观：形式价值观，
助手：蚁族助手，
) => {
console.log（'hello'，values.input）
设置显示平面列表（true）；
helpers.resetForm（）；
};
返回(
{（{handleChange，handleBlur，handleSubmit，values}）=>(
}
/>
)}
{showFlatList&&(
)}
);

如果在手机上运行代码沙盒，您可以看到问题：

我需要阻止车把做任何事。如果我单击列表中的a按钮，它应该在第一次尝试时起作用，而不是触发把手。即使我添加

validateOnBlur=false

，问题仍然存在。在这种情况下，错误消息不会显示，但按钮在第一次尝试时仍然不起作用

---

我单击的按钮有一个单独的功能。这个按钮在表单之外，所以它应该做它原本应该做的事情，而不是在onBlur中做任何事情（在沙盒中：它只是打印）。

在

字段输入定义中，每次渲染时调用函数

为了防止这种情况发生，可以使用箭头函数，该函数将仅在模糊时渲染

onBlur={(fieldType) => handleBlur(fieldType)}

您可以在React.js文档中找到更详细的解释：

onBlur
是使用Formik的默认行为。如果你聚焦一个区域，不管你是否点击表单外的东西，它都会触发

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

不过，还有一些变通办法

使用onMouseDown（&onKeyDown）代替onClick
基本上，
onMouseDown
将在
onBlur
之前调用。
请参见此处的示例实现：

该代码检查您是否正在单击链接。在您的情况下，您可以编写一个不同的逻辑：“单击的按钮是否在表单中？”
您是指fieldType吗？我已经尝试过
onBlur={（）=>handleChange（fieldType）}
但它不起作用。列表中的按钮在第一次单击时仍然不起作用。您正在尝试传递参数，（fieldType）=>handledChange（fieldType）类型脚本期望事件作为第一个参数，因此（event，fieldType）=>handleBlur（_event，fieldType）可能会覆盖您，即使这样，当我单击按钮/UserFoundENtry时，handleBlur仍然被调用。当您单击按钮时，您希望onBlur将触发。这是onBlur事件的预期结果。您需要在函数中处理这个问题注意，handleBlur仅在我单击userFoundEntry项目内部时调用。如果我在其外部单击，它不会被触发（至少从我观察到的情况来看）。
onBlur
是Formik的默认验证。它将在您的另一个按钮中的
onClick
事件之前触发。为什么它阻止调用其他事件？我不知道。不过还有一个解决办法。您可以在字段中的
onBlur
之前的按钮中触发
onMouseDown
事件。我的意思是，onMouseDown发生在模糊之前（我们不能说onMouseDown也发生在模糊之前，它类似于onClick）。见：
<a
    href="#back-to-previous"
    onMouseDown={onClick}
    onKeyUp={(e) => {
      e.key === 'Enter' && onClick(e);
    }}
>

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