Question

我正在Formik中使用React应用程序进行验证。

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

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

Link to Sandbox

这是为什么？

Answer 1

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

在您的Input组件中，您可以执行此操作（我已经删除了不相关的道具）：

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

看看您自己的onChange将如何被onChange()内部的Formik的field取代？更清楚地说，...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;

See it here in action。

尽管总的来说，我不确定您要做什么。您的表单工作正常，您可能不需要自定义onChange，但也许有一些特定的用例。

Answer 2

首先让我弄清楚这个答案只是出于帮助的目的，我知道这个问题已经被接受，但是如果上述解决方案对任何人都无效，我会对我的版本做出一些修改 >

此处onChangeText将返回数量字段的值

  <Formik
     initialValues={{ product_id: '', quantity: '', amount: '' }}
     onSubmit={(values, actions) => {
        this.submitLogin(values);
     }}

     //some other elements ....
    <Field placeholder='No. of Quantity' name='quantity' component={CustomInputComponent}
        onChangeText={value => {
           console.warn(value); // will get value of quantity
        }}
     />
  />

您可以在课程之外定义组件

const CustomInputComponent = ({
   onChangeText,
   field, // { name, value, onChange, onBlur }
   form: { touched, errors, isValid, handleBlur, handleChange, values, setFieldValue }, // also values, setXXXX, handleXXXX, dirty, isValid, status, etc.
   ...props
}) => {
   return (
      <Input {...field} {...props} onBlur={handleBlur(field.name)}
        onChangeText={value => {
           setFieldValue(field.name, value);
           onChangeText(value); // calling custom onChangeText
        }}
     />
   )
}

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

2 个答案: