Javascript onChange处理程序没有'；使用自定义组件时不触发

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

验证工作正常，但我的onChange处理程序未启动：

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

console.log（“gfdg”）}
/>

---

这是为什么？

在

Input

内部，您将道具传递到输入元素的方式意味着您的

onChange

正在被Formik的

onChange

覆盖。当您使用自定义组件创建

字段

时（即，在您的情况下为

输入

），Formik将其

字段属性

传递给该组件

FieldProps

包含一个属性

field

，该属性包含各种处理程序，包括

onChange

在

Input

组件中，您可以这样做（我已经删除了不相关的道具）：

如果您要重新排序，控制台消息现在将显示：

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

---

虽然总的来说我不确定你想做什么。你的表格很好，您可能不需要一个自定义的

onChange

，但可能您有一些特定的用例。

首先让我明确一下，这个答案只是为了帮助，我知道这个问题已经被接受，但是如果上面的解决方案对任何人都不起作用，我会对上面的答案进行一些修改

此处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
        }}
     />
  />

{
this.submitLogin（值）；
}}
//其他一些因素。。。。
{
console.warn（value）；//将获取数量的值
}}
/>
/>

在类之外，您可以定义组件

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
        }}
     />
   )
}

const CustomInputComponent=({
一旦更改文本，
字段，//{name，value，onChange，onBlur}
形式：{toucted，errors，isValid，handleBlur，handleChange，values，setFieldValue}，//还有values，setXXXX，handlexxx，dirty，isValid，status，等等。
…道具
}) => {
返回(
{
setFieldValue（field.name，value）；
onChangeText（值）；//调用自定义onChangeText
}}
/>
)
}
讨论了你的问题，但是说实话，我会考虑去掉那个看起来太复杂的Frimik库来实现验证……但是我不熟悉Frimik。也许这是有用的…@messerbill formik的目的不是验证，而是处理forms@EllaSharakanski我知道。我在React应用程序中使用Formik进行验证。OP说：D@messerbill哦，我明白了：）非常非常好的回答。谢谢你，麦斯康！我没有获取更改值
changeent.target.value
我正在使用react native和for
changeent.target.value
获取
未定义的

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;

  <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
        }}
     />
   )
}