如何在 Input 组件的 onChange 中添加函数？答案

【问题标题】：How to add function to onChange in Input cmponent?如何在 Input 组件的 onChange 中添加函数？
【发布时间】：2020-07-24 04:55:29
【问题描述】：

我得到了表单（使用 formik + andt）。输入更改时找不到如何添加功能。例如我的邮件字段：

<Form.Item
  help={fieldHelp()}
  validateStatus={fieldValidateStatus('email')}
  label="E-mail"
  name="email"
  >
  <Input
    value={values.email}
    onChange={handleChange} // how to add function here?
    onBlur={handleBlur}
   />
</Form.Item>

是否可以在onChange={handleChange} 中再添加一项功能？像这样的东西：onChange={handleChange, myfunction()} 或其他方式？

【问题讨论】：

标签： javascript reactjs antd formik

【解决方案1】：

是的，您可以通过这种方式调用多个函数

onChange={(e) => {
    handleChange(e);
    myfunction()
}}

【讨论】：

'handleChange' 没有被调用，它通过了我认为onChange={handleChange} 当我像这样调用onChange={handleChange()} 我得到了Formik 错误

【解决方案2】：

您需要为 TextInput 创建一个自定义组件并手动将 error 传递给它...

      <MyAppTextInput
        ...
        onChangeText={handleChange('latin')}
        onBlur={handleBlur('latin')}
        error={touched.latin && errors.latin}
      />

const onYourFieldChange = fieldName => {
  handleChange(fieldName);
  YourCustomFn();
};

【讨论】：

谢谢。 'handleChange' 是 Formik 内部的函数。当我尝试这样做时，onChange={onYourFieldChange('email')} formik 验证不起作用。当我喜欢这个onChange={handleChange} 验证工作正常。但可能是我的代码有问题... :(