我明白了 Field
有一个 onChange
您可以在其中传递自己的 Formik 的属性 onChange
来自这里的 Prop :https://jaredpalmer.com/formik/docs/api/formik#handlechange-e-reactchangeevent-any-void .
但是,我很难理解这些 value[key]
在哪里是通过的,所以我可以处理表单中传递的数据。发现于 withFormik(): How to use handleChange我可以将两个回调传递给 Formik 的 onChange
Prop ,但我想知道是否有更好的方法来处理这个问题。
在回复的人发表评论后进行编辑,谢谢:
我的代码在 Field
的 onChange Prop 中使用了这两个回调:
export default function FormikForm() {
const onSubmitHandler = (formValues, actions) => {
console.log(formValues);
console.log(actions);
};
const onChangeHandler = (e) => {
console.log(e.target.value);
};
return (
<div>
<h1>This is the Formik Form</h1>
<Formik
initialValues={{
name: "",
email: "",
age: ""
}}
onSubmit={onSubmitHandler}
render={props => {
return (
<Form>
<label>
Name
<Field
name="name"
type="text"
placeholder="name"
onChange={e => {props.handleChange(e); onChangeHandler(e)}}
/>
</label>
<button type="submit">Submit</button>
</Form>
);
}}
/>
</div>
);
}
有没有办法做与
onSubmitHandler
类似的事情,其中 Formik 自动输出输入的值,而无需在 onChange
中调用这两个函数?谢谢
最佳答案
每个字段组件都会收到一个 field prop其中有一个 value
prop 包含该字段的值,以及 form
prop 包含可用于设置值的辅助方法。我需要查看您的代码结构以提供有关如何实现所需内容的具体建议,但您可以通过调用 form.setFieldValue(field.name, field.value)
来模拟默认功能。 .此外,field
prop 在 field.onChange
中默认内置了这个处理程序支柱。
关于reactjs - 如何处理 Formik 的 `handleChange` Prop ?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58120035/