gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-02 16:51:10 25 4
gpt4 key购买 nike

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.

最佳答案

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

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

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

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

例如。

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

关于reactjs - 如何创建 Formik 的 handleChange 会喜欢的事件?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58654521/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com