Formik：useField钩子上的onBlur处理程序

Question

?onBlur处理程序和useField挂钩上的实时验证

你好！

我开始学习和练习Formik，但是遇到了一个问题。我的项目使用自定义占位符，它们与焦点字段一起向上移动。

我需要什么？

• 具有isFocused状态的功能组件
• 用onFocus和onBlur更改它
• 根据状态，更改占位符的位置

?开始做

为此，我用CustomField钩子制作了一个组件useField()。效果不错，酷?

但是后来他注意到实时验证和错误消息停止工作working‍?️。因为我重新定义了onBlur处理程序。搜索之后，研究问题没有找到onBlur处理程序而不干扰Formik的解决方案。

准备好的沙盒?Sandbox

?请告诉我我错过了什么，错过了什么地方，如何实现？谢谢！

Answer 1

不确定这是否是最佳解决方案。

为此，我的解决方法是继续使用formik提供的onBlur函数，同时还要使用您的函数。这是通过将字段onBlur函数传递给handleBlur函数并在执行时调用它来完成的。您可以在此沙箱中看到更改。

因此，变化的两个领域是这条线

import React, { useState, useContext, useEffect } from "react"

const defaultState = {
  user: null,
  setUser: () => { },
  modUser: () => { }
}
const Context = React.createContext(defaultState)

const Test = () => {
  const setUser = user => setState(prevState => ({ ...prevState, user }))
  const modUser = () => setUser(state.user.toUpperCase()) // `state.user` never changes to updated value!
  // user is 'Nick' at start...
  const initState = {
    user: 'Nick',
    setUser,
    modUser
  }
  // user changes to 'Bob' after 1 second...
  useEffect(() => { setTimeout(() => setUser('Bob'), 1000) }, [])
  const [state, setState] = useState(initState)
  return <Context.Provider value={state}>
    <div>Parent user is {state.user}</div>
    <TestInner />
  </Context.Provider>
}

const TestInner = () => {
  const state = useContext(Context)
  // user (should) change to uppercase 'BOB' after 2 seconds...
  useEffect(() => { setTimeout(() => state.modUser(), 2000) }, [])
  return <div>Child user is {state.user}</div>
}

export default Test

和

onBlur={e => handleBlur(field.onBlur, e)}

要使用formik onBlur函数：D 祝你好运

这是代码沙箱

https://codesandbox.io/s/agitated-gagarin-g07zk?fontsize=14&hidenavigation=1&theme=dark

Answer 2

另一种解决方案，它们是相同的，但是此选项更美观，更易读！

感谢Kinbaum！

  

在handleBlur函数中，您可以调用field.onBlur并将合成事件传递给它。   像这样：

function handleBlur(e) {
    // Call the Formik onBlur event before your custom stuff
    field.onBlur(e);

    if (!field.value.length > 0) {
        onFocus(false);
    }
}

GitHub Issue Answer

工作代码?Sandbox Link