Как передать формат cleave js в поле formik? - PullRequest
Новая
       23

Как передать формат cleave js в поле formik?

2 голосов
/ 12 июня 2019

Я использую Formik с проверками yup, и он работает отлично. Я пытаюсь интегрировать cleavejs для форматирования, как числовой формат. Проблема в том, что когда мое поле formik изменяется на Cleave, формат работает, но форма не проверяется. Но когда я переключаюсь на ввод в Field, проверки работают, но форматирование не работает. Как я могу передать формат Cleave js в поле Formik, не меняя поле на Cleave Hers мой код.

Я пытался следовать документации cleave js и ее работе, но она не работает в моей проверке. В соответствии с документом cleave js измените ввод на Cleave, но я использую Field для проверки моей формы. 

import React, { useState, useEffect, useRef } from 'react'
import ReactDOM from 'react-dom'
import { Formik, Field } from 'formik'

import {getvalidations} from './app' 
import Cleave from 'cleave.js/react'



export default function New (props){
const [state, setValue] = useState({
    rate:'',
});

return(
    <Formik
        initialValues={state}
        validationSchema={getvalidations}
        onSubmit={handleSubmit}
        render={formProps => {

        const { values, isSubmitting, errors, handleChange, handleBlur, handleSubmit, touched } = formProps

        return (
            <React.Fragment>
               div className="field">
                   <label className="label">Rate</label>
                   <div className="control">
                      <Field 
                          name="rate"
                          type="text" 
                          onChange={handleChange}
                          options={{numerical: true}}                                     
                            className={(() => {                                         
                              return touched.rate && errors.rate 
                              ? 'is-danger' : "";})()}
                      />
                      { touched.rate && errors.rate && <p className="help is-danger">{errors.rate}</p> }
                    </div>
            </div>

            </React.Fragment>
            )
        }}
    />);
  }

1 Ответ

2 голосов
/ 12 июня 2019

Вы можете создать пользовательский компонент и передать его в formik Field, используя компонент prop

Например 

<Field name="name" label="Label" component={CustomInput} />

const CustomInputComponent = ({
  field, // { name, value, onChange, onBlur }
  form: { touched, errors }, ...props
}) => (
  <div>
    <Cleave
      placeholder="Enter your credit card number"
      options={{creditCard: true}}
      {...field} {...props} />
  </div>
);

Подробнее см. В документах formik от ссылка

...