Пользовательское поле с компонентом Class Formik - PullRequest
Новая
       1

Пользовательское поле с компонентом Class Formik

1 голос
/ 03 мая 2019

Я использую Formik в качестве библиотеки для обработки моего значения формы. Я пытаюсь использовать пользовательский компонент в качестве поля, мой родительский компонент выглядит так: 

        <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 ]

1 голос
/ 12 мая 2019

Я заставляю его работать, используя компонент класса (не функциональный компонент).

В родительском компоненте используйте что-то вроде этого: 

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 }.
    */
}
1 голос
/ 04 мая 2019

Компонент Formik Field будет вызывать ваш компонент класса так же, как и при обычном использовании его в любом другом компоненте.Таким образом, предоставленные значения передаются как свойства field и form.Таким образом, вы можете обращаться к ним, как обычно, this.props.field.onChange как к отдельным значениям или просто передавать все значения непосредственно в любой дочерний компонент. 

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