使用自定义组件时，onChange处理程序不会触发

问题描述

我正在使用 Formik 在React应用中进行验证.

I'm using Formik for validation in a React app.

验证工作正常，但是我的onChange处理程序无法触发:

Validation is working correctly, but my onChange handler does not fire:

  <Field
    type="text"
    name="name"
    placeholder="First Name"
    component={Input}
    onChange={() => console.log("gfdg")}
  />

链接到沙盒

这是为什么?

推荐答案

在Input内部，订购传递给输入元素的道具的方式意味着您的onChange被Formik的onChange覆盖.当您使用自定义组件(在您的情况下为Input)创建Field时，Formik将其FieldProps传递给该组件. FieldProps包含属性field，该属性包含各种处理程序，包括onChange.

Inside Input, the way you have ordered the props passed to your input element means your onChange is being overwritten by Formik's onChange. When you create a Field with a custom component (i.e. Input in your case), Formik passes its FieldProps to the component. FieldProps contains a property field that contains various handlers including onChange.

在您的Input组件中，您可以执行以下操作(我已经删除了不相关的道具):

In your Input component you do this (I've removed the irrelevant props):

<input
    onChange={onChange}
    {...field}
/>

看看您自己的onChange将如何被field内部的Formik的onChange()取代?更清楚地说，...field基本上是导致这种情况的发生:

See how your own onChange will just get replaced by Formik's onChange() inside field? To make it clearer ...field is basically causing this to happen:

<input
    onChange={onChange}
    onChange={field.onChange}
    // Other props inside "field".
/>

如果您要重新排序，则会显示控制台消息:

If you were to reorder those the console message will now appear:

<input
    {...field}
    onChange={onChange}
/>

---

但是现在您的输入现在无法使用，因为当输入更改时，您确实需要调用Formik的onChange来让Formik.如果您既希望自定义onChange事件，又要使输入正常工作，则可以这样操作:

---

However now your input won't work now because you do need to call Formik's onChange to let Formik now when your input changes. If you want both a custom onChange event and for your input to work properly you can do it like this:

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，但也许有一些特定的用例.

Although overall I'm not really sure what you're trying to do. Your form is working fine, you probably don't need a custom onChange but maybe you have some specific use case.

这篇关于使用自定义组件时，onChange处理程序不会触发的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！