Переход с Formik-Material-UI 1,0 до 2,0 - PullRequest
Новая
       24

Переход с Formik-Material-UI 1,0 до 2,0

0 голосов
/ 02 февраля 2020

У меня есть существующая форма, использующая пользовательский компонент, который работает под 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, но остаток застрял. Если Поле больше не доступно, что мне делать в 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"
  },
  ...

}

Инструкции по миграции:

Как уже говорилось, я использую инструкции по миграции с здесь , скриншот, из которого я также добавляю.

Migration instructions including hooks for useForm and useField

1 Ответ

1 голос
/ 02 февраля 2020

В formik api нет крючка с именем useForm, я думаю, вы смешиваете его с крюком useFormik. formik-material-ui использует useField ловушку для внутреннего использования, поэтому вам не нужно оборачивать ваш компонент компонентом Field от formik, вместо этого вы можете напрямую визуализировать ваш MyCheckbox как: <MyCheckbox name="sectionChoices" value={label} label={label} />

...