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

Question

我在 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 个处理程序中？

Answer 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>