时间戳

首页 > 解决方案 > 如何创建 Formik 的 handleChange 喜欢的事件？

reactjs - 如何创建 Formik 的 handleChange 喜欢的事件？

问题描述

Formik 包提供了像 handleBlur、handleChange 这样的事件处理程序，对于普通的表单项，我们可以像这样分配：

    <input name ="foo" onChange = {handleChange}/>

如果我更仔细地观察那个 onChange 事件应该是，比如：

<input value = {values.foo} name="foo" onChange ={(e) => {
    console.log(e); 
    handleChange(e); //Formik still handles it
}}/>

我们可以看到它是一个 React SyntheticEvent被分派给 formik。

问题是 - 如果我实现了自己的组件，请说：

const Randomer = (props) => {
    const {onChange, name} = props; 
    const [value, setValue] = useState(Math.random() + ""); 
    return <div> 
         {value}
         <button onClick = {() => setValue(Math.random()+"")}> Click me</button> 
    </div> 
}

我想同样让 Formik 知道这个组件正在做的改变，我将如何修改这个代码来做到这一点？

代码沙箱在这里。

标签： reactjseventsformik

解决方案

好的，我找到了真正的答案：

  • Formik包提供了setFieldValue签名功能：

(field: string, value: any, shouldValdidate? :boolean) => void

您可以使用它来手动挂钩 formik 字段集：

例如。

 <Randomer
    onChange={value => setFieldValue("random", value)}
  />

推荐阅读