Question

我正在使用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} />
                    </>
                );
            }
        }
    </>
    );

我试图返回与文档中所述类似的功能，但未成功。

是否可以将自定义字段实现为类组件？

任何帮助将不胜感激。

Answer 1

Formik Field组件将调用您的类组件，就像在其他任何组件中正常使用它一样。因此，提供的值将作为属性field和form传递。因此，您通常可以像这样this.props.field.onChange作为单个值访问它们，也可以将所有值直接传递给任何子组件。

render() {
 const {field} = this.props
 return (
   <input {...field}/>
 )
}

Answer 2

我通过使用类组件（而不是功能组件）使其工作。

在父组件上使用类似以下的内容：

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 }.
    */
}

具有类组件Formik的自定义字段

2 个答案: