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

Question

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 知道这个组件所做的更改，我将如何修改这段代码来做到这一点？

Code Sandbox here.

Answer 1

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

• Formik 包提供了函数setFieldValue 的签名:

(字段:字符串，值:任何，shouldValdidate?:boolean) => void

您可以使用它来手动 Hook formik 字段集:

例如。

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