从formik-material-ui 1.0迁移到2.0
从formik-material-ui 1.0迁移到2.0
提问于 2020-02-02 19:47:25
我有一个现有的表单，使用，使用在formik-material-UI1.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} />正如documentation所描述的那样，我已经删除了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"
},
...}
迁移说明：
如上所述，我使用了来自here的迁移说明，我还从其中添加了一个屏幕截图。
回答 1
Stack Overflow用户
回答已采纳
发布于 2020-02-03 00:27:13
在formik api中没有叫做useForm的钩子，我想你把它和useFormik钩子混在一起了。formik-material-ui在内部使用了useField钩子，所以你不必用formik的Field组件包装你的组件，相反，你可以像这样直接呈现你的MyCheckbox：<MyCheckbox name="sectionChoices" value={label} label={label} />
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/60025759
复制相关文章
相似问题
腾讯云开发者
