在移动设备上使用 Formik 进行 React-select 时验证工作不正确

Question

我已将 React-select 元素与 Formik 连接起来。验证在桌面浏览器中运行良好。但在移动浏览器或移动浏览器模拟器中，我在第一次 React-select 元素值更改时收到验证错误。但我在下一个值更改时没有收到错误。这是 Formik 或 React-select 中的错误吗？有可能解决这个问题吗？

这是codesandbox上的示例： https://codesandbox.io/s/musing-mcnulty-62euu ?file=/index.js

请仅在移动浏览器或移动浏览器模拟器中检查它，因为验证在桌面浏览器中工作正常。

Answer 1

react-select我最近使用with遇到了同样的问题formik，仅发生在移动浏览器/模拟器上。

该问题似乎是由于做出选择时反应选择导致 onBlur 所致。此 onBlur 在设置字段值后立即导致字段验证，导致出现此已知问题： https: //github.com/jaredpalmer/formik/issues/2457

我发现的最佳解决方案是将您的反应选择组件设置为在进行选择时不模糊：

<Select
  ...
  blurInputOnSelect={false}
/>

在某些情况下，另一个稍微更麻烦的修复是在模糊/设置触摸的地方添加一个小的延迟

setTimeout(() => {
  formik.setFieldTouched(name, true)
}, 100)

Anveshiano Manney 的建议也适用于您不需要validateOnBlur整个表格的情况

Answer 2

我遇到了同样的问题，不完全确定为什么它在移动浏览器（safari）中不能正常工作。但是，可以通过阻止“onBlur”验证来修复此问题。

  <Formik
      validateOnBlur={false}
      ....
   >