具有类组件表单的自定义字段
具有类组件表单的自定义字段
提问于 2019-05-04 04:32:52
我使用Formik作为库来处理我的表单值。我正在尝试使用一个自定义组件作为Field，我的父组件如下所示：
<Formik
onSubmit={(values) => {
console.log(values);
}}
>{({values}) => (
<div className="card-wrapper">
<Form>
<div className="row">
{group.elements.length ? (
group.elements.map((item,i) => {
return (
<div key={i} className="col-12 col-sm-6 col-md-6 col-lg-4">
<Field type="range" component={LevelSelector} name={item.name.trim()} />
</div>
)
})
): ""}
<div className="btn-container">
<Input type="submit" className="btn btn-primary" value="Save"></Input>
</div>
</Form>
</div>
)}
</Formik>我的自定义组件是类组件，而不是函数组件。文档(https://jaredpalmer.com/formik/docs/api/field)告诉我可以作为函数组件实现，但不能作为类组件实现。
我的渲染函数如下所示：
render() {
return(
<>
{
({
field,
form,
...props
}) => {
return(
<>
<Label for="exampleSelect">{this.props.name}: </Label>
<p><i>{this.state.levelLabel}</i></p>
<Input {...field} {...props} onChange={this.handleChange} />
</>
);
}
}
</>
);我曾尝试返回与文档中描述的函数类似的函数，但没有成功。
有没有办法将自定义字段实现为类组件？
任何帮助都将受到高度的感谢。
回答 2
Stack Overflow用户
发布于 2019-05-12 08:08:07
我通过使用类组件(而不是功能组件)来使其工作。
在父组件上使用类似以下内容：
import {Formik, Field} from 'formik';
import CustomComponent from '../path/to/CustomComponent/CustomComponent';
...
<Formik
someOtherProps
render=(() => (
<Field name="customField" component={CustomComponent}然后，在您的CustomComponent类中，有两个额外的属性来使用formik方法
import React, {Component} from 'react';
class CustomComponent extends Component {
/* you have these props, which access to
this.props.field, // { name, value, onChange, onBlur }
this.props.form // { touched, errors, values, setXXXX, handleXXXX, dirty, isValid, status, ...etc }.
*/
}Stack Overflow用户
发布于 2019-05-04 05:56:17
Formik Field组件将调用您的类组件，就像您在任何其他组件中正常使用它一样。因此，所提供的值将作为属性field和form传入。因此，您可以像这个this.props.field.onChange一样将它们作为单个值访问，或者直接将所有值传递给任何子组件。
render() {
const {field} = this.props
return (
<input {...field}/>
)
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/55976738
复制相关文章
相似问题
腾讯云开发者
