无法覆盖 formik Select 的 `onChange` 处理程序

Posted 2023-02-18

【中文标题】无法覆盖 formik Select 的 `onChange` 处理程序

【英文标题】：Unable to override the `onChange` handler of formik Select

【发布时间】：2022-01-18 11:59:56

【问题描述】：

我在 Formik 和 yup 的帮助下实现了一个响应表单。我有 Select control form 选择一些类型这里是代码。

组件定义

const MySelect = (label, ...props) => 

  const [field, meta] = useField(props)

  return (
      <div>
        <label htmlFor=props.id || props.name>label</label>
        <select 
          ...props 
          ...field
        />
        meta.touched && meta.error ? <div className="error">meta.error</div> : null
      </div>
  )

我正在使用它

<MySelect label="Job Type" name="jobType">
    <option value="">Select a job type</option>
    <option value="designer">Designer</option>
    <option value="development">Developer</option>
    <option value="product">Product Manager</option>
    <option value="other">Other</option>
</MySelect> 

到这里一切正常，但如果尝试像这样添加自定义 onChange 处理程序：

const MySelect = (label, ...props) => 
...
    <select 
      ...props 
      ...field 
      onChange=(e) => 
        console.log('Value', e.target.value);
      
    />
...

自定义功能可以正常工作，就像在上面的情况下，它记录了新选择的值，但它禁用了内置的 changeHandler，因此我无法在控件上看到新选择的值。控件仍显示第一个/初始值。

现在我的问题是如何将两者（即内置处理程序和我的自定义处理程序）合并到 1 个处理程序中？

【参考方案1】：

你可以使用 Formik 的 setFieldValue 方法

<Field name="jobType">
  ( field, form:  setFieldValue  ) => (
    <select 
       ...props 
       ...field 
       style= meta.touched && meta.error ? inputErrorStyle :  
       onChange=(e) => 
        console.log('Value', e.target.value);
        setFieldValue('jobType', e.target.value)
       
    />
  )
</Field>

【讨论】：

感谢阿米特您的意见。但是，如果您可以看到我的 changeHandler 函数在 Formik 之外，我就无法在那里找到 setFieldValue。

您可以将setFieldValue 传递给changeHandler 并在那里执行setFieldValue('jobType', value)

我应该从哪里将setFieldValy 传递给'changeHandler'？