从 formik-material-ui 1.0 迁移到 2.0

Question

我有一个现有的表单，使用在 formik-material-ui 1.0 下工作的自定义组件：

const MyCheckbox = ({ field, form, label, ...rest }) => {
  const { name, value: formikValue } = field
  const { setFieldValue } = form

  const handleChange = event => {
    const values = formikValue || []
    const index = values.indexOf(rest.value)
    if (index === -1) {
      values.push(rest.value)
    } else {
      values.splice(index, 1)
    }
    setFieldValue(name, values)
  }

  return (
    <label>
      <Checkbox onChange={handleChange} checked={formikValue.indexOf(rest.value) !== -1} {...rest} />
      <span>{label}</span>
    </label>
  )
}

并使用此行呈现：

<Field component={MyCheckbox} name="sectionChoices" value={label} label={label} />

如文档所述，我删除了Field导入和component属性，但其余部分让我卡住了。 如果 Field 不再可用，我应该在MyCheckbox做什么？ 我试过了：

import { Formik, Form, useForm } from 'formik'

const MyCheckbox = ({ field, label, ...rest }) => {
  const { name, value: formikValue } = field
  const form = useForm()
  const { setFieldValue } = form

  const handleChange = event => {
    const values = formikValue || []
    const index = values.indexOf(rest.value)
    if (index === -1) {
      values.push(rest.value)
    } else {
      values.splice(index, 1)
    }
    setFieldValue(name, values)
  }

  return (
    <label>
      <Checkbox onChange={handleChange} checked={formikValue.indexOf(rest.value) !== -1} {...rest} />
      <span>{label}</span>
    </label>
  )
}

但我收到此错误：

Attempted import error: 'useForm' is not exported from 'formik'.

我的package.json文件具有以下相关依赖项：

{
  "dependencies": {
    "@material-ui/core": "^4.5.1",
    "@material-ui/icons": "^4.5.1",
    "formik": "^2.0.3",
    "formik-material-ui": "^2.0.0-alpha.3",
    "react": "^16.10.2",
    "react-dom": "^16.10.2",
    "react-router-dom": "^5.1.2",
    "react-scripts": "3.3.1",
    "recompose": "^0.30.0",
    "typeface-roboto": "^0.0.75",
    "yup": "^0.28.1"
  },
  ...

}

迁移说明：

如上所述，我使用了这里的迁移说明，我还添加了一个屏幕截图。

Answer 1

formik api 中没有名为useForm的钩子，我认为您将它与useFormik钩子混合在一起。 formik-material-ui在内部使用useField钩子，因此您不必用 formik 的Field组件包装您的组件，而是可以直接呈现您的MyCheckbox如： <MyCheckbox name="sectionChoices" value={label} label={label} />