我正在使用Formik用于在 React 应用程序中进行验证。
验证工作正常,但我的 onChange 处理程序未触发:
<Field
type="text"
name="name"
placeholder="First Name"
component={Input}
onChange={() => console.log("gfdg")}
/>
这是为什么?
最佳答案
在 Input
内部,您对传递给输入元素的 props 进行排序的方式意味着您的 onChange
正在被 Formik 的 onChange
覆盖。当您使用自定义组件(即您的情况下的 Input
)创建 Field
时,Formik 会将其 FieldProps
传递给该组件。 FieldProps
包含一个属性 field
,其中包含各种处理程序,包括 onChange
。
在您的 Input
组件中执行此操作(我删除了不相关的 Prop ):
<input
onChange={onChange}
{...field}
/>
看看您自己的 onChange
如何被 field
内的 Formik 的 onChange()
替换?为了更清楚地说明 ...field
基本上导致了这种情况的发生:
<input
onChange={onChange}
onChange={field.onChange}
// Other props inside "field".
/>
如果您要重新排序,现在将显示控制台消息:
<input
{...field}
onChange={onChange}
/>
<小时/>
但是现在您的输入将无法工作,因为您确实需要调用 Formik 的 onChange
来让 Formik 在您的输入发生更改时立即执行。如果您想要自定义 onChange
事件并让您的输入正常工作,您可以这样做:
import React from "react";
import { color, scale } from "./variables";
const Input = React.forwardRef(
({ onChange, onKeyPress, placeholder, type, label, field, form }, ref) => (
<div style={{ display: "flex", flexDirection: "column" }}>
{label && (
<label style={{ fontWeight: 700, marginBottom: `${scale.s2}rem` }}>
{label}
</label>
)}
<input
{...field}
ref={ref}
style={{
borderRadius: `${scale.s1}rem`,
border: `1px solid ${color.lightGrey}`,
padding: `${scale.s3}rem`,
marginBottom: `${scale.s3}rem`
}}
onChange={changeEvent => {
form.setFieldValue(field.name, changeEvent.target.value);
onChange(changeEvent.target.value);
}}
onKeyPress={onKeyPress}
placeholder={placeholder ? placeholder : "Type something..."}
type={type ? type : "text"}
/>
</div>
)
);
export default Input;
虽然总的来说我不太确定你想做什么。您的表单工作正常,您可能不需要自定义 onChange
但也许您有一些特定的用例。
关于javascript - 使用自定义组件时,onChange 处理程序不会触发,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55961481/