React Formik: 如何使用自定义 onChange 和 onBlur

我开始使用 福米克库进行响应，但是我不知道道具 handleChange 和 handleBlur 的用法。

根据 那些文件，handleBlur 可以设置为 <Formik/>上的道具，然后必须手动传递到 <input/>。

我试过了，没有成功: (为了更清晰起见，我保留了 handleBlur 的代码)

import React from "react";
import { Formik, Field, Form } from "formik";
import { indexBy, map, compose } from "ramda";
import { withReducer } from "recompose";


const MyInput = ({ field, form, handleBlur, ...rest }) =>
<div>
<input {...field} onBlur={handleBlur} {...rest} />
{form.errors[field.name] &&
form.touched[field.name] &&
<div>
{form.errors[field.name]}
</div>}
</div>;


const indexById = indexBy(o => o.id);
const mapToEmpty = map(() => "");


const EmailsForm = ({ fieldsList }) =>
<Formik
initialValues={compose(mapToEmpty, indexById)(fieldsList)}
validate={values => {
// console.log("validate", { values });
const errors = { values };
return errors;
}}
onSubmit={values => {
console.log("onSubmit", { values });
}}
handleBlur={e => console.log("bluuuuurr", { e })}
render={({ isSubmitting, handleBlur }) =>
<Form>
<Field
component={MyInput}
name="email"
type="email"
handleBlur={handleBlur}
/>
<button type="submit" disabled={isSubmitting}>
Submit
</button>
</Form>}
/>;

这种方法有什么问题吗？ HandleBlur 和 handleChange 实际上应该如何使用？

107005 次浏览
小开
最佳答案

您需要从 Formik中删除第一个 handleBlur，因为模糊事件仅在字段级别有效，并在 Field 元素中执行以下操作:

<Field
component={MyInput}
name="email"
type="email"
onBlur={e => {
// call the built-in handleBur
handleBlur(e)
// and do something about e
let someValue = e.currentTarget.value
...
}}
/>

参见 https://github.com/jaredpalmer/formik/issues/157

小开

我遇到了同样的问题使用 onChange 方法，我认为不存在于福克道具。

所以我使用了 onSubmit 方法，因为它在 forik 道具中是可用的它给我们字段值然后把这些值传递给关注函数，就像这样..。

<Formik
initialValues={initialValues}
validationSchema={signInSchema}
onSubmit={(values) => {
registerWithApp(values);
console.log(values);
}}
>

在那里你可以使用，我只是更新状态，并传递给公理，像这样..。

    const [user, setUser] = useState({
name: "",
email: "",
password: ""
});


const registerWithApp = (data) => {
const { name, email, password } = data;
setUser({
name:name,
email:email,
password:password
})
   

if (name && email && password) {
axios.post("http://localhost:5000/signup", user)
.then(res => console.log(res.data))
}
else {
alert("invalid input")
};
}

它的工作..。 希望能帮到你。

小开

根据上面提到的问题代码，您只需要更改一件事，即 模糊捕捉 = { handleBlur }

它在 html 输入元素上工作。反应不支持 onBlur 和 onFocusOut。然而，我得到了同样的问题，最终解决了与反应-福里克与渲染道具的组件。


提交答案